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 ...
随机推荐
- 使用Python发送企业微信消息
准备工作: 到企业微信官网,注册一个企业:登录企业微信后台,创建一个“自建”应用, 获取企业ID.agentid.secret这3个必要的参数:在企业微信的通讯录中,创建多个测试账号:在手机端安装“企 ...
- Azure IoT 技术研究系列1
物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是我们物联网技术的最大应用,车联网.物联网. 互联网三网合一.作为Azure重要的Partner和 ...
- ping/curl
ping查看网络连通情况 curl查看接口可用情况
- springboot+mybatis 配置sql打印日志
第一种: 配置类型 # 配置slq打印日志 logging.level.com.lawt.repository.mapper=debug重点: #其中 com.lawt.repository.ma ...
- 移动web开发之像素和DPR详解
前话: 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识 什么 ...
- nyoj 952 : 最大四边形 (计算几何)
题目链接 任意四边形均可看作是两个三角形拼接得到的(即使是凹四边形),故 可以O(n^2)枚举所有的线段,然后对每条线段O(n)枚举线段端点外的其他点,用来更新以此线段构成的三角形的有向面积的最大值m ...
- js去重的es6做法和es5做法
1.es5做法var array=[1,3,4,5,2,3,4,5,5,5];var ob={};var result=[];array.forEach(function (a) { var key= ...
- 第八周作业—N42-虚怀若谷
一.显示统计占用系统内存最多的进程,并排序 [root@centos7 ~]# ps -eo uid,pid,ppid,tty,c,time,cmd,%mem --sort=-%mem UID PID ...
- 阿里重磅开源全球首个批流一体机器学习平台Alink,Blink功能已全部贡献至Flink
11月28日,Flink Forward Asia 2019 在北京国家会议中心召开,阿里在会上发布Flink 1.10版本功能前瞻,同时宣布基于Flink的机器学习算法平台Alink正式开源,这也是 ...
- ExoPlayer + 边缓存边播放
在此基础上改动:https://www.cnblogs.com/candyzhmm/p/9957928.html private void openPlayer(String videoUrl) { ...