promise 封装 axios
/*axios({
method:"get",
url:"./data.json",
data:{
id:10
}
}).then((res)=>{
console.log(res)
},(e)=>{
console.log(e);
})*/
function axios(options) {
let promise = new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
var data = "";
//数据处理
for (var key in options.data) {
data += "&" + key + "=" + options.data[key]
}
if (options.method == "get") {
let url = options.url + "?" + data.slice(1);
xhr.open(options.method, url);
xhr.send();
} else if (options.method == "post") {
xhr.open(options.method, options.url);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function () {
let timer = null;
let timeout = options.timeout?options.timeout:5000
if(xhr.readyState == 4 && xhr.status == 200){
let res = JSON.parse(xhr.responseText);
clearTimeout(timer);
resolve(res);
}
timer = setTimeout(()=>{
clearTimeout(timer);
reject(xhr.status);
},timeout)
}
})
return promise;
}
promise 封装 axios的更多相关文章
- 【转】Vue 2.0封装axios笔记
前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...
- Vue笔记:封装 axios 为插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- 封装axios方法之一
一.先来说说为什么要封装axios异步请求. 我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react. 如何配置我这里就不说了. 然后...然后我们就会 ...
- vue 封装axios以及使用中间代理 proxy
为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件 用来存放接口地 ...
- 15、vue项目封装axios并访问接口
1.在src下新建util文件夹,在util下新建request.js文件: 封装axios: import axios from 'axios' import QS from 'qs'; // im ...
- Vue中封装axios
参考: https://www.jianshu.com/p/7a9fbcbb1114 https://www.cnblogs.com/dreamcc/p/10752604.html 一.安装axios ...
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- 创建Vue项目及封装axios
1. 始vue化项目 https://www.cnblogs.com/xiaonq/p/11027880.html vue init webpack deaxios # 使用脚手架创建项目 deaxi ...
- 封装axios在util中
创建util工具类,封装通用的get和post请求 封装axios成工具类,方便大家请求调用 1.创建util文件夹 2.创建request.js 3.封装 //封装请求相关方法 //初始化一个axi ...
随机推荐
- 来到园子的第two天!!!!!
经过这几天的打字练习 从练习的第一天到今天(应该是第三天吧) 从67到133字/分钟,我练的是英文文章测试,总的来说挺不容易 ,感觉后几天提升就不好提了呀 不说废话了 简单说一下今天的收获吧 都是 ...
- MFC学习笔记2---简单计算器
前言 学习了鸡啄米网页的前三部分后,我们就可以做一个小软件出来了,我选择先做一个计算器. 这是Win7系统自带的计算器: 为了提升成就感,我将计算器的大部分内容去除,于是就变成这样: 这样就只剩下了1 ...
- VMware Workstation 卸载时卡在“正在卸载网络驱动程序(Virtual Network Editor夯死)”
出现此种问题,以下方式均无法成功卸载: 控制面板-卸载程序(Virtual Network Editor 未响应) Geek 卸载VMware Workstation(Virtual Network ...
- 关于在IOS中 contenteditable=true 无法输入的问题
解决: 1.添加样式-webkit-user-select:text 2.如果引入了fastclick,需要添加个类名 needsclick 来源于知乎(https://www.zhihu.com/q ...
- facebook第三方登陆实践
未完,待续... 1.注册 到Facebook官网注册开发者账号,创建应用(开发者平台 https://developers.facebook.com),如果尚未注册账号的请注册账号并进行登录) 注册 ...
- Mysql数据库表类型
MySQL的数据表类型很多,其中比较重要的是MyISAM,InnoDB这两种. 这两种类型各有优缺点,需要根据实际情况选择适合的,MySQL支持对不同的表设置不同的类型.下面做个对比: MyISA ...
- docker安装禅道
一.下载地址 禅道开源版: http://dl.cnezsoft.com/zentao/docker/docker_zentao.zip 数据库用户名: root,默认密码: 123456.运行时 ...
- 6.25考试整理:江城唱晚&&不老梦&&棠梨煎雪——题解
按照旧例,先安利一下主要作者:一扶苏一 以及扶苏一直挂念的——银临姐姐:银临_百度百科 (滑稽) 好哒,现在步入正题: 先看第一题: 题解: 在NOIP范围内,看到“求方案数”,就说明这个题是一个计数 ...
- 在github pages网站下用jekyll制作博客教程
https://www.jekyll.com.cn/ https://github.com/onevcat/vno-jekyll https://help.github.com/articles/us ...
- CG-CTF | I wanna play CTF
这题跟bugku上的come_game超级像,于是菜狗决定研究一下,先鸣谢一下好友the fool,菜狗一直卡在开始界面哇,谢谢大佬给的第一关的数据 这是过到关卡1的数据,经过一系列的尝试得到结论: ...