问题背景
有三个请求,每一个请求的何时返回结果不可预知,取决于服务器的处理情况。现在要求,三个请求按照先后次序执行。
方案模型
将所有的请求统一包装成 promise,便于接下来的统一处理。
function factory(ajax) {
return Promise.resolve(ajax);
}
复制代码
ajax请求需要按照一定的顺序执行,先执行前一个,前一个执行完毕了,再执行后一个。由于 promise 可以链式调用。因此,应该按照既定的顺序构造一个执行链。在形式结构上
prev.then(curr).then(handler);
复制代码
curr
的执行必须等到prev
的状态确定。prev
的状态确定后,开始执行 curr
,curr
的执行结果会作为 handler
的参数。
function deal_by_order(ajaxs = []) {
const resp = [];
return ajaxs.reduce(function(prev, curr) {
return prev.then(curr).then(function(data) {
resp.push(data);
return resp;
});
}, Promise.resolve());
}
复制代码
reduce 是 JS 中一个重要的函数,累计计数。
测试代码
const time = (timer) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, timer);
});
};
const ajax1 = () =>
time(2000).then(() => {
console.log(1);
return 1;
});
const ajax2 = () =>
time(1000).then(() => {
console.log(2);
return 2;
});
const ajax3 = () =>
time(1000).then(() => {
console.log(3);
return 3;
});
复制代码
deal_by_order([ajax1, ajax2, ajax3]).then((data) => {
console.log("done");
console.log(data); // data 为 [1, 2, 3]
});
复制代码