|
前言
为了加深对promise的使用，在此写一下用promise封装原生ajax请求。
代码实现
function queryData(url) {
var p = new Promise(function (reject, reslove) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return;
//当请求成功时，用reslove进行回调
if (xhr.readyState == 4 && xhr.status == 200) {
reslove(xhr.responseText);
}
//请求失败，用reject进行回调
else {
reject('服务器错误');
}
}
})
return p;//返回promise对象
}
//请求url，获得请求结果（then前一个函数表示输出reslove结果，后一个表示输出reject结果）
queryData('http://localhost:8080/url1').then(function (data) {
console.log(data);//返回成功的结果
},function (res) {
console.log(res);//返回失败的结果
})
在日常开发中，经常会遇到回调地狱。因为同一级下的ajax请求不能保证顺序执行，使用会在ajax请求中再套一个ajax请求…，这就是回调地狱。 解决方法：用promise.then()方法链
queryData('url1').then(function(data) {
console.log(data)
return queryData('url2');//返回第二个请求
}).then(function(data) {
console.log(data);
return queryData('url3');//返回第三个请求
}).then(function(data) {
console.log(data);
})
|