前言
最近练习 Promise 的使用,去梳理了一下实现 Promise 串行的方法,对 Promise 的掌握程度相比之前也更加熟练一些,下面是实现代码和说明。
实现代码
方法1
// 1. 使用 async await(es7) 注意在 forEach 中使用会有问题,进行异步操作的循环最好用普通 for 或 while 循环
async function promiseIteratorA(arr) {
for(let i = 0; i < arr.length; i++){
await arr[i]();
}
}
方法2
// 2. 使用自执行函数,结合 shift 方法 和 then 方法不断迭代。
function promiseIteratorB(arr) {
(function iterator() {
if(arr.length){
promiseArr.shift()().then(iterator);
}
})();
}
方法3
// 3. 利用 Promise.resolve() 以及 promise.then() 返回的 Promise 的实例通过循环赋值实现串行
function promiseIteratorC(arr) {
let res = Promise.resolve();
for(let i = 0; i < arr.length; i++){
res = res.then(() => arr[i]());
}
}
测试代码
// Promise 测试数据
let p1 = function(){
console.log(1);
return Promise.resolve(1);
}
let p2 = function(){
console.log(2);
return Promise.resolve(2);
}
let p3 = function(){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(3);
resolve(3);
}, 1001)
});
}
let p4 = function () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(4);
resolve(4);
}, 2002);
});
}
let promiseArr = [p1, p2, p3, p4];
// 函数调用
promiseIteratorA(promiseArr);
// promiseIteratorB(promiseArr);
// promiseIteratorC(promiseArr);
小结
2、3 两种方法总结,它们主要是利用 .then 方法,然后使用迭代的方式挨个执行实现串行。个人感觉用 async await 实现相比 2、3 两种方法更简便。