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 更新 ...
随机推荐
- Golang知识图谱
原:https://www.processon.com/view/link/5a9ba4c8e4b0a9d22eb3bdf0?from=timeline 百度脑图重制:http://naotu.bai ...
- IOS 圆形进度条
// // CCProgressView.h // Demo // // Created by leao on 2017/8/7. // Copyright © 2017年 zaodao. All r ...
- maven 私服同步无法获取依赖的pom.xml的依赖
项目中引入了依赖: <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hado ...
- pyqt4手动编写资源文件
资源文件resource.qrc为XML格式,格式较简单,可以手动编辑: <!DOCTYPE RCC><RCC version="1.0"> <qre ...
- C++ Addon Async 异步机制
线程队列: libuv,window 可在libuv官网下载相应版本 opencv: 编译的时候opencv的位数要和 node的bit 一致 兼容electron : node-gyp rebu ...
- PDO连接数据库-Xmodel
<?php/* * Copyright (c) 2018, 北京博习园教育科技有限公司 * All rights reserved. * * 文件名称: xmodel.php * 摘 要: 模型 ...
- hibernate10--命名查询
<?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hiber ...
- map里面的set方法
let a=[1,2,3,4,1,2,3,4,1,4];let b= new Set(a);console.log(b) 还有add方法介绍下: let a=new Set();let b=[1,1, ...
- 调用微信定位功能 lat _ lng php方法
{:wx_jssdk_config("false")} //最主要的这一句 没有这一句在微信浏览器里是无法调用的定位功能的.下面有这个方法说明 <script> wx. ...
- python语法_注释
#加需要注释的内容,#号后面的单行注释 #这一段注释 左右各三个注释单引号或者双引号 中间的内容为注释,可以包含多行 '''这一段注释''' """这一段注释" ...