Promise 串行实现

前言

最近练习 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 两种方法更简便。

参考资料：https://juejin.cn/post/6844903624942813197