理解promise.all和promise.allSettled

在工作中经常会遇到这样一个场景，在一个页面中可能会加载多个异步请求。为了性能。一般会通过Promise.all[async func1,async func2 ..]，但是promise.all会隐藏一个风险。当其中一个异步请求挂掉时，它会把挂掉的结果作为返回值。这显然不是我们想要的。我们需要哪怕其中一个或者多个挂掉了，你依然可以把整个结果数组返回给我。同时其他请求不受到影响。

接下来我们尝试手动实现一个这样的方法,我们暂且加它allSettled

在实现之前。我们需要了解几个要点：

1 allSettled接受一个promise数组。返回值还是一个promise。通过then可以获取到它最后的结果。

所以我们会有一个基本的结构如下：

function allset(promiseArr){
    let arr=[]
    
    return new Promise((resolve,reject)=>{
       xxxxx //执行一系列操作
        resolve (arr)

    })
}

allset([p1,p2,p3]).then(res=>{
    console.log("allSellter；",res)
}).catch(err=>{
    console.log("allSellter--err；",err)

})

2 promise数组中不管是否有结果挂掉。我们依然要把它的结果抛出来，也就是resolve（）出来。

3 allset 最后的结果是一个promise，其值这个数组，也即是allset.then(res=>res：这个数组)在什么时机抛出？我们知道是allset接受的promise数组都执行完。那如何知道promise数组都执行完呢？

我们给个index。每次执行一次以后index++，当index的值和传入的数组长度相等的时候。就表示promise数组都执行完了。这时候我们再整体抛出结果数组

function allset(promiseArr){
    let resArr=[];
        let index=0 
    return new Promise((resolve,reject)=>{
        
        for(let i=0;i<promiseArr.length;i++){
           
            Promise.resolve(promiseArr[i]).then(res=>{
                （走到then里面说明执行了一次异步结果，记录）
                index++;
                resArr[i]={
                    status:"onfullfilled",
                    value:res
                }
               if(index===promiseArr.length){
                   console.log("resArr:",resArr)
                   resolve(resArr)
               }
            }).catch((err)=>{
                index++;
                resArr[i]={
                    status:"onrejected",
                    value:err
                }
                if(index===promiseArr.length){
                   resolve(resArr)
               }

            })
        }

    })
    
}

注意一点：为什么 Promise.resolve(promiseArr[i]).then(res=>{ index++;这里要这么写呢？因为我们promiseArr中又可能传入的是一个常规数据类型的值。比如123，或者“string”,这时候then就会报错。所以我们通过Promise.resolve(promiseArr[i]).强制把它转化为promise，确保.then的时候它不会报错。

通过这个方法。我们就不用担心promise.all带来的隐患了

let p1=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(111)
    },1000)
})
let p2=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject(222)
    },2000)
})
let p3=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(333)
    },3000)
})

let arr=[p1,p2,p3]
function allset(promiseArr){
    let resArr=[];
        let index=0 
    return new Promise((resolve,reject)=>{
        
        for(let i=0;i<promiseArr.length;i++){
           
            Promise.resolve(promiseArr[i]).then(res=>{
                index++;
            
                resArr[i]={
                    status:"onfullfilled",
                    value:res
                }
               if(index===promiseArr.length){
                   console.log("resArr:",resArr)
                   resolve(resArr)
               }
            }).catch((err)=>{
                index++;
                resArr[i]={
                    status:"onrejected",
                    value:err
                }
                if(index===promiseArr.length){
                   resolve(resArr)
               }

            })
        }

    })
    
}
allset([p1,p2,p3]).then(res=>{
    console.log("allSellter；",res)
}).catch(err=>{
    console.log("allSellter--err；",err)

})