Promise.all实现原理

Promise.all的使用

1、使用特征

• 入参是一个数组，可以传基本类型值，也可以传promise对象。
• 返回结果是一个Promise对象。
• 入参数组中的每一个都返回成功，才返回成功。
• 只要有一个执行失败，则返回失败。

2、使用案例

Promise.all([1, read2(file1), 3]).then(data => {
    console.log(data)
},error => {
    console.log(error)
})

3、适用场景

• 适合多个异步调用函数，并且多个异步函数的调用的入参和结果都无必然联系，比如多个文件的上传或下载。
• 多个异步函数的执行只关注成功或失败结果。

Promise.all的实现原理

1、实现代码示例

// 封装 Promise.all方法
Promise.all = function (values) {
    return new Promise((resolve, reject) => {
        let result = []; // 存放返回值
        let counter = 0; // 计数器，用于判断异步完成
        function processData(key, value) {
            result[key] = value;
            // 每成功一次计数器就会加1，直到所有都成功的时候会与values长度一致，则认定为都成功了，所以能避免异步问题
            if (++counter === values.length) {
                resolve(result);
            }
        }
        // 遍历 数组中的每一项，判断传入的是否是promise
        for (let i = 0; i < values.length; i++) {
            let current = values[i];
            // 如果是promise则调用获取data值，然后再处理data
            if (isPromise(current)) {
                current.then(data => {
                    processData(i, data);
                }, reject);
            } else {
                // 如果不是promise，传入的是普通值，则直接返回
                processData(i, current);
            }
        }
    });
}

2、代码解析

• Promise.all是挂载到Promise类实例上
• 返回的是一个Promise
• 需要遍历入参数组中的每一项，判断传入的是不是promise，如果是promise则执行then方法，然后将then方法中的成功回调的data返回，失败则reject
• 如果入参数组中有基本数值，则直接返回
• 通过计数器，来判断函数的执行结果

3、代码GitHub地址
https://github.com/RenZhongrui/javascript-learn/blob/master/004-javascript-promise/promise.js