//实现mergePromise函数,把传进去的数组顺序先后执行,
//并且把返回的数据先后放到数组data中
const timeout = ms => new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, ms);
});
const ajax1 = () => timeout(2000).then(() => {
console.log('1');
return 1;
});
const ajax2 = () => timeout(1000).then(() => {
console.log('2');
return 2;
});
const ajax3 = () => timeout(2000).then(() => {
console.log('3');
return 3;
});
function mergePromise(ajaxArray){
let arr = [];
let p = Promise.resolve();
ajaxArray.forEach(item=>{
p = p.then(data=>{
if(data){
arr.push(data);
}
return item();
});
})
return p.then(data=>{
arr.push(data);
return arr;
})
}
mergePromise([ajax1, ajax2, ajax3]).then(data => {
console.log('done');
console.log(data); // data 为 [1, 2, 3]
});
// 分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]
这个mergePromise的原理是什么?
每次重写了p?Promise.resolve?
promise的then链中的return,并且返回的结果是一个新的Promise可以被下一个then处理,他利用了这一点,将每一个ajax请求都添加到了一个一个P的then链中,这个P是直接通过resolve拿到then链的起始。
然后在forEach里面 p = p.then()是为了下一次forEach能够继续跟在then链的下一个。
由于then链中的处理是对上一个结果加到数组里,然后返回本次的新的Promise,所以最后return的时候还要加一句p.then来把最后一次的调用结果存进去。
这是一个对Promise的结构的巧妙运用。