温故知新（七三）实现 Promise.all

实现 Promise.all

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

一、核心思路

1.接收一个 Promise 实例的数组或具有 Iterator 接口的对象作为参数
2.这个方法返回一个新的 Promise 对象
3.遍历传入的参数，用 Promise.resolve() 将参数“包裹一层”，使其变成一个 Promise 对象
4.参数所有回调成功才是成功，返回值数组与参数顺序一致
5.参数数组其中一个失败，则触发失败状态，第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息

二、实现代码

一般依赖，Promise.all 用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能什么都显示不出来，这就看当前页面的耦合程度了
 

Promise._all = function(promises){
    //转为数组
    promises = Array.from(promises);
    //传入Promise 实例的数量
    let num = promises.length;
    //返回的结果数组
    let results = [];
    //对要处理的传入参数的promise实例的计数
    let count = 0;
    //返回一个Promise对象
    return new Promise((resolve,reject)=>{
        //遍历传入的promise实例数组
        promises.forEach((promise,index)=>{
            //用Promise.resolve包裹
            Promise.resolve(promise)
            .then(res=>{
                //结果数组中添加每个实例的结果，这里必须用index标注而不能用results.push(res)，
                //因为index可以标明顺序,保证结果顺序正确
                results[index] = res;
                if(++count === num){
                    //实例处理完成，返回结果数组
                    resolve(results);
                }
            },error=>{
                //一旦发生错误则rejected
                reject(error);
            })
        })
    })
}



//测试
let p1 =  new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(1);
    },1000)
});
let p2 =  new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(2);
    },2000)
});
let p3 =  new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(3);
    },3000)
});
Promise._all([p3,p2,p1]).then(res=>{
    console.log(res); //[3,2,1]
});