直接上代码:

 function Ajax(method, headers, url, data, progress = null) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();   
xhr.open(method,url);//配置
for (const key in headers) {//遍历header,设置响应头
let value = headers[key];
xhr.setRequestHeader(key,value);
}
xhr.send(data);//发送,并配置响应体
xhr.onreadystatechange = function () {
if (xhr.readyState === ) {
try {//设置了超时时间, 防止由于该条件(即readystate等于4)成立, 进入该判断块, 下面的status读取不到, 导致抛出错误
if (xhr.status >= || xhr.status < || xhr.status == ) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
} catch (error) {
reject(new Error('服务器错误请重试'));
}
}
};
});
}

使用promise封装ajax的更多相关文章

  1. Promise 封装 ajax

    Promise 封装ajax 成链式结构: var url = 'http'; function(method, url) { return new Promise(function(res, ret ...

  2. 用promise封装ajax

    首先贴代码 var ajaxOptions = { url: 'url', method: 'GET', async: true, data: null, dataType: 'text', } fu ...

  3. promise封装ajax

    promise的含义(本身不是异步,是封装异步操作的容器,统一异步的标准) promise对象的特点:对象的状态不受外界影响:一旦状态改变,就不会再变,任何时候都可以得到这个结果. function ...

  4. vue实践---vue结合 promise 封装原生ajax

    有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...

  5. 简单的基于promise的ajax封装

    基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(functi ...

  6. React Native 网络请求封装:使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  7. 微信小程序ES6方法Promise封装接口

    为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...

  8. jsonp的原理介绍及Promise封装

    什么叫jsonp? jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现原理: 动态创建scrip ...

  9. vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装

    相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...

随机推荐

  1. MYSQL-用户密码修改

    解决方法如下:1.终端中结束当前正在运行的mysql进程.# sudo /etc/init.d/mysql stop2.用mysql安全模式运行并跳过权限验证.# sudo /usr/bin/mysq ...

  2. 带你入门SpringCloud 之 通过SpringCloud Bus 自动更新配置

    前言 在<带你入门SpringCloud统一配置 | SpringCloud Config>中通过 SpringCloud Config 完成了统一配置基础环境搭建,但是并没有实现配置修改 ...

  3. JQuery .width()/.css("width")方法 比较

    1. 获取到的值的区别 获取到的为实际宽度,不包括 内边距 和 边框: <div id="aa"> ...... </div> // 1. width() ...

  4. Zookeeper监控(Zabbix)

      一直在弄监控,这些个中间件Zookeeper.Kafka......,平时也只知道一点皮毛,也就搭建部署过,没有真正的用过,一般都是大数据的同学在用,作为运维人员我需要对他做一个监控,由于对他不是 ...

  5. Cocos Creator 3D 打砖块图文教程(一)

    在线体验链接: http://example.creator-star.cn/block3d/ 上面图中是打砖块游戏的主要 3D 节点元素,Shawn 这两天在学习 Unity 与 Creator3D ...

  6. MongoDB 学习笔记之 入门安装和配置

    下载MongoDB: 下载解压即可使用. 为了启动方便和统一管理, 在Mongo根目录下建立/data, /logs, /conf文件夹. 在conf文件夹下建立mongodb.conf 文件,基本配 ...

  7. else块的用途

    除了在if...else...中使用,else块还可以在for循环.while循环以及try...except中使用. 在for循环中使用: my_list = ['a','b','c','d'] f ...

  8. java 远程方法调用(RMI)

    什么是RMI? 维基百科:一种用于实现远程过程调用的应用程序编程接口.它使客户机上运行的程序可以调用远程服务器上的对象. 什么是序列化及反序列化 (1)序列化:把对象转换为字节序列的过程称为对象的序列 ...

  9. 各种xml配置文件(所含内部标签及顺序)的提示功能是真的人性化

    通过mybatis generator的配置文件来举例,其他配置文件(web.xml,mybatis,spring,springmvc等)同理 mybatis可以通过mybatis generator ...

  10. CRS-2674: Start of 'ora.cssd' on 'rac2' failed 引发的rac集群服务起不来问题

    问题背景:客户反馈Oracle rac集群节点宕机 1.首先查看宕机原因,归档日志满导致服务重启,查看归档日志路径是USE_DB_RECOVERY_FILE_DEST (默认路径), 安装的时候没有做 ...