锐客网

  1. 首页 > it技术 > >

使用promise封装ajax操作

原文：https://blog.csdn.net/Little_Pig_Bug/article/details/81079822
Jquery的ajax
在开发中，我们常常会用到ajax,根据请求的地址，服务器返回相应的success或者error，而且ajax也是可以异步的，async为true的时候为异步，反之同步，下面以异步为例，因为我们的Promise就是异步操作。
$.ajax({
cache: true,
type: "GET",
url: "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1",
dataType: "json",
async: true,
success: function(data) {
callback(data);
},
error: function(data) {
console.info("error: " + data.responseText);
}
});
上面的ajax请求的意思就是，当我异步请求一个url地址时，如果成功则会执行callback,否则打印出错误信息，所以ajax请求 ，不论结果是什么，都只有一种结果，success或者error。这和我们的Promise不谋而合，那我们也可以用Promis去封装我们的ajax。
Promise封装Ajax
【使用promise封装ajax操作】我们知道Promise会接收两个参数，resolve(成功)和reject(失败)，我们可以用这两个参数代替ajax的success和error，并使用链式调用,then里面执行成功的操作，catch里面执行错误的信息。这里会涉及到http方面的知识，相关参数可以参考这个链接
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send
const $ajax = function(url) {
return new Promise((resolve, reject) => {
// 创建 XMLHttpRequest对象,用于在后台与服务器交换数据。
let request = new XMLHttpRequest()
//设置向服务器提交的方式
request.open("GET", url, true)
request.responseType = 'json'
request.setRequestHeader("Accept", "application/json");
// onreadystatechange捕获事件请求的状态
request.onreadystatechange = function handlerRequest() {
//readyState为4的时候，代表请求操作已经完成，这意味着数据传输已经彻底完成或失败。
if (this.readyState === 4) {
//请求成功
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText));
}
}
}
//发送 HTTP 请求,默认异步请求
request.send();
})
}
$ajax("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1")
.then((resolve) => {
console.log(resolve)
})
.catch((reject) => {
console.log(reject)
})
上面的js,刚开始我直接在vscode里面运行，发现直接报错 "XMLHttpRequest is not defined",但是我在html引入改该s,就没有报错了，一直不懂为啥@**@
总结:其实我们开发中并不会用到这么麻烦的封装，直接用jquery封装好的ajax的就可以，如果是vue的话，你可以去 看看 vue-resource和axios,发现和Promise何其相似，所以我们开发的过程中，去了解开发的思想是非常的重要。 作者：Little_Pig_Bug
来源：CSDN
原文：https://blog.csdn.net/Little_Pig_Bug/article/details/81079822
版权声明：本文为博主原创文章，转载请附上博文链接！

    推荐阅读


    上一篇：2018-06-16

    下一篇：我的日常之一