面试官：一分钟学废手写Promise.all源码

前言

大家好，我是前端小六，爱好敲代码和健身，无聊时间喜欢看看小说。在这家公司已经安逸的待着三年了，很久没有出去面试了，有一天被临时告知说需要去支援一个项目，没有任何准备面试的前提下，就被公司告知对方需要面试一下，然后很紧张的坐在了面试官对面、问了一个问题，手写一下Promise.all?然后递了一张白纸过来。我静静的看着这张白纸，心理一万个念头闪过....

初使用Promise.all

• 成功的案例

const promise1 = Promise.resolve(1);  
const promise2 = function () {  
    return new Promise((resolve, reject) => {  
        setTimeout(()=>{  
            resolve(2)  
        },2000)  
    })  
};  
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2(), promise3]).then(res=>{  
    console.log('成功',res)  
}).catch(err=>{  
    console.log(err)  
})

打印上述案例：会在2秒之后打印出 [1,2,3]

• 失败的案例

const promise1 = Promise.reject(1);  
const promise2 = function () {  
    return new Promise((resolve, reject) => {  
        setTimeout(()=>{  
            reject(2)  
        },2000)  
    })  
};  
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2(), promise3]).then(res=>{  
    console.log('成功',res)  
}).catch(err=>{  
    console.log('失败',err)  
})

打印上述案例：会在2秒之后打印出失败：1

分析

我们从上述两个案例因此可以分析出：

• Promise.all 接收一个数组参数
• Promise.all 会返回一个新的Promise
• 当其中有一个请求变为失败状态就会执行返回第一个失败的结果
• 只有当所有的请求状态变为成功的状态才会成功返回，并且按照传入的数组顺序进行返回对应的结果

手写源码

// 接收一个数组参数 
function promiseAll(arr){  
    // 返回一个新的Promise
    return new Promise((resolve, reject) => {  
        let index = 0  
        let arr1 = []  
        for(let i=0;i<arr.length;i++){  
            let promise = arr[i]  
            Promise.resolve(promise).then(res=>{  
                index++  
                arr1[i] = res  
                // 当所有的状态变为成功的状态才会成功返回，并且按照传入的顺序进行返回对应的结果
                if(index===arr.length){  
                    resolve(arr1)  
                }  
             // 当其中有一个变为失败状态立马就会返回第一个失败的结果    reject
            },reject)  
        }  
    })  
}