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 更新 ...
随机推荐
- MySQL 全文检索 ngram Mybatis
创建全文索引(FullText index) 创建表的同时创建全文索引 FULLTEXT (name) WITH PARSER ngram 通过 alter table 的方式来添加 alter ta ...
- js多个(N)个数组的的元素组合排序算法,多维数组的排列组合或多个数组之间的排列组合
现在有一批手机,其中颜色有['白色','黑色','金色','粉红色']:内存大小有['16G','32G','64G','128G'],版本有['移动','联通','电信'],要求写一个算法,实现[[ ...
- centos 7 mysql 开启binlog
一.前言 本文章用到的mysql 为5.7版本. 按照https://blog.csdn.net/king_kgh/article/details/74800513中的步骤操作,结果启动失败. 配置文 ...
- Centos 7内核3升级到4
步骤 1:检查已安装的内核版本 让我们安装了一个发行版,它包含了一个特定版本的内核.为了展示当前系统中已安装的版本,我们可以: # uname -sr 下面的图片展示了在一台 CentOS 7 服务器 ...
- zhenya moves from parents
Zhenya moved from his parents' home to study in other city. He didn't take any cash with him, he onl ...
- ASP.NET MVC中使用FluentValidation验证实体(转载)
1.FluentValidation介绍 FluentValidation是与ASP.NET DataAnnotataion Attribute验证实体不同的数据验证组件,提供了将实体与验证分离开来的 ...
- sql 查分数段人数
select count(case 分数字段 when 100 then 1 end) as [满分],count(case when 分数字段 between 90 and 99 then 1 en ...
- 基于 redis 的分布式锁实现 Distributed locks with Redis debug 排查错误
小结: 1. 锁的实现方式,按照应用的实现架构,可能会有以下几种类型: 如果处理程序是单进程多线程的,在 python下,就可以使用 threading 模块的 Lock 对象来限制对共享变量的同步访 ...
- 1、js比较日期的大小
① html <div class="ptb10"><span>共享开始时间:</span><input type="text& ...
- python中 ImportError: No module XXX的解决办法
python是通过过使用:sys.path来获取模块的路径的,返回的但是一个list 向python模块路径中加入自己的模块:sys.path.append(os.path.abspath('%s.. ...