axios的封装
function axios(options){
var promise = new Promise((resolve,reject)=>{
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var str = "";
//进行传入数据的处理
for(var key in options.data){
str += "&" + key + "=" + options.data[key];
}
if(options.method == "get"){
var url = options.url + "?" + data.slice(1);//因为在前面将传入的数据多加了一个&符号,然而需要的是&之后的数据
xhr.open(options.method,url);
xhr.send();//通过get方式请求数据不需要发送数据
}else if(options.method == "post"){
xhr.open(options.method,options.url);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(str);
}
xhr.onreadystatechange = function(){
var timer = null;
//timeout是ajax请求中的一个默认属性,表示时间。如果该默认属性存在则使用默认值,否则使用5000毫秒
var timeout = options.timeout?options.timeout:5000;
if(xhr.readState == 4 && xhr.status == 200){
var res = JSON.parse(xhr.responseText);
clearTimeout(timer);
resolve(res);
}
timer = setTimeout(()=>{
clearTimeout(timer);
reject(xhr.status);
},timeout);
}
})
return promise;
}
axios的封装的更多相关文章
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue中对axios进行封装
在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...
- axios方法封装
axios方法封装 一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下: 五.封装后的方法的使用 1.在main.js文件里引用之前写好的文件,我的命名为htt ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- 三、VUE项目BaseCms系列文章:axios 的封装
项目开发中 ajax 是不可缺少的,一个好的封装可以减少我们很多的重复代码,维护也更方便.在 vue 开发中我们用的比较多的就是 axios.下面代码是项目中用到的 axios 的封装. http.j ...
- vue中axios的封装以及简单使用
一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...
- vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...
- 第五十五篇:Axios的封装
好家伙, 上图 1.为什么需要封装axios? 当我们改变项目的使用环境时候,url也会随之改变,那么我们就需要改很多axios请求中的url配置 现在我们将axios封装,在项目使用环境改变时我们只 ...
- axios(封装使用、拦截特定请求、判断所有请求加载完毕)
博客地址:https://ainyi.com/71 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 vue2.0之后,就不再对 vue-resource 更新 ...
随机推荐
- 121、Data Binding(数据绑定)(转载)
http://www.jianshu.com/p/b1df61a4df77 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/060 ...
- Wireshark抓包分析TCP建立/释放链接的过程以及状态变迁分析
Wireshark抓包分析TCP建立/释放链接的过程以及状态变迁分析 一.介绍计算机网络体系结构 1.计算机的网络体系结构 在抓包分析TCP建立链接之前首先了解下计算机的网络通信的模型,我相信学习过计 ...
- 联想R720面板右下部分按压后和上面按键串联了
如图所示的位置,一用力按压,就会触发键盘的按键. 前提: 本人刚刚加装了内存条,内存条是京东买的 十铨(Team) DDR4 2400 8GB 笔记本内存,安装完内存以后,发现电脑出了这样的问题. 解 ...
- Excel带条件求和——SUMIF函数
老婆求帮忙,问Excel中怎么跨Sheet带条件求和,就是关于sheet2中筛选出来的数据自动合计在sheet3中 . 比如有个sheet2表中的数据如下: 现在要在sheet3中求合计, 通过分析可 ...
- 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
参考;https://blog.csdn.net/qq_37746973/article/details/78402812?utm_source=blogxgwz1 https://blog.csdn ...
- PentestBox在win10里打不开工具
PentestBox详细安装过程:http://www.cnblogs.com/ESHLkangi/p/8336398.html 在使用PentestBox的时候出现了打不开工具的问题,最后看到一个老 ...
- 【1】public
[面向对象] 李坤是不是人?(人类) 飞飞是不是人?(人类) 扎心是不是人?(人类) 是:特指某一个事物 属于:同一的类型 什么是对象: 就是特指的某一个东西,万物皆对象 什么是类: 具有一批相同属性 ...
- phpStudy apache 启动不了
做 phpstudy 环境配置的时候,apache 一直启动不了,启动后又停止,80 端口也没有被占用,也下载了 vc9 运行库,还是不行,后来找了半天,中文路径的问题
- 5. 文件上传下载 与 db数据库
文件上传 formidable multer npm i formidable multer 如何使用见: https://www.npmjs.com/ util.inspect 自己查 文件上传:表 ...
- 调用微信定位功能 lat _ lng php方法
{:wx_jssdk_config("false")} //最主要的这一句 没有这一句在微信浏览器里是无法调用的定位功能的.下面有这个方法说明 <script> wx. ...