pormise在我看来,主要来优化存在多个ajax请求时,可以把回调函数给独立出来,统一调用。
比如在以前,我们在进行多个ajax请求时,第二个请求需要用到第一个请求返回的数据时,我们通常是这样的:
$.ajax({
url: 'xxx.php',
method: 'post',
data: {page:1},
datatype: 'json',
success: (res) => {
var id = res.id;//得到请求返回的数据,进行第二次请求
$.ajax({
url: 'xxx.php',
method: 'post',
data: { id: id },
datatype: 'json',
success: (res) => {
}
})
},
error: (err) => {
}
});
可能有人优化会对ajax做个函数的封装,但实际还是嵌套的,promise就能把回调函数给独立出来,然后链式调用。
我们优化一下上面的代码:
var promise = new Promise(function (resolve, reject) {
$.ajax({
url: '/Dome/Json.ashx',
method: 'get',
datatype: 'json',
success: (res) => {
console.log("Json.ashx");
var obj = JSON.parse(res);
resolve(obj[1].ID);
},
error: (err) => {
reject("/Dome/Json.ashx");
}
});
});
function handler(data=1) {
var promise1 = new Promise(function (resolve, reject) {
$.ajax({
url: '/ashx/PageHandler.ashx',
method: 'get',
data: {page:data},
datatype: 'json',
success: (res) => {
console.log("PageHandler.ashx");
resolve(res);
},
error: (err) => {
reject("/ashx/PageHandler.ashx");
}
});
});
return promise1;
}
function failed(url) {
console.log(`请求失败:${url}`);
}
//调用
promise.then(handler, failed).then(function (data) {
console.log(data);
}, failed)
这里首先来解释一下上面的代码:
首先实例一个Promise对象,然后有两个参数,第一个为resolve,第二个为reject,前者一般为成功的时候调用,后者是失败的时候调用。
我们主要说调用那里的代码,then方法可以把回调函数分离出来,then函数有两个参数,均为函数,前者是请求成功的函数,后者是请求失败的函数。
这里第一次调用then,就执行第一个ajax请求,然后传入两个函数,handler和failed,这里是handler就是上面ajax的第二个请求,由于第一个ajax请求成功,调用了resolve函数,promise就会调用handler函数,如果请求失败,则进入reject,那就会调用failed函数。
然后还要讲的一个函数是promise的all函数。all函数主要用于多个请求的数据无关联的时候。
上述的代码不变,我们把调用改一下:
//适用于多个ajax请求,但是每个ajax返回数据无关联的情况
Promise.all([promise, handler()]).then(function (result) {
console.log("结束");
console.log(result);
})
all函数会等待全部请求完成之后,才完成回调,数据则在result中用数组的形式返回。
数组中的数据是每个resolve中每个传入的数据。
promise不止用于异步请求,很多场景都可以用,需要大家灵活应用。