ES11的Promise.allSettled

小编最近因为一些自己的问题，没有更新文章。今天刚好有一点精神头，特意来更新一下，今天和大家一起探讨的是Promise对象中的allSettled方法，主要是为了解决多次异步请求的时候，中途出现失败的痛点处理。在之前的文章中，小编更新的Promise.all方法，这个主要是为了优化多次请求的情况，可以写成这样。

Promise.all([    
    Promise.resolve({        
        code:200,        
        data:[1,2,3]    
    }),    
    Promise.resolve({        
        code:200,       
        data:[4,5,6]    
    }),    
    Promise.resolve({        
        code:200,        
        data:[7,8,9]    
    }),
]).then(res => {    
    console.log(res)    
    console.log("成功")
}).catch(err => {    
    console.log(err)    
    console.log("失败")
})  // [{code:200,data:[1,2,3]},{code:200,data:[4,5,6]},{code:200,data:[7,8,9]}]  成功

用这个方法的时候，每个参数都是Promise对象，如果每一次请求都成功的时候，痛点并没有显现那么明显，当中间有一次请求失败或者异常的时候，就会这样

Promise.all([    
    Promise.resolve({        
        code:200,        
        data:[1,2,3]    
    }),    
    Promise.reject({        
        code:500,        
        data:[]    
    }),   
    Promise.resolve({        
        code:200,        
        data:[7,8,9]    
    }),
]).then(res => {    
    console.log(res)    
    console.log("成功")
}).catch(err => {   
    console.log(err)    
    console.log("失败")
})  // {code: 500, data: Array(0)}  失败

这样就完全掩盖了请求成功的回调，所以在es11中引入了Promise.allSettled方法，使用方法如下

Promise.allSettled([    
    Promise.resolve({        
        code:200,       
        data:[1,2,3]   
    }),    
    Promise.reject({        
        code:500,        
        data:[]   
    }),    
    Promise.resolve({        
        code:200,        
        data:[7,8,9]    
    }),
]).then(res => {    
    console.log(res)    
    console.log("成功")
}).catch(err => {    
    console.log(err)    
    console.log("失败")
})  // [{status:"fulfilled",value:{code:200,data:[1,2,3]}},{status:"rejected",value:{code:500,data:[]}},{status:"fulfilled",value:{code:200,data:[7,8,9]}}]

最后可以通过数据的status和value，应用filter或者map高阶函数进一步筛选数据。又是增加技能的一天，大家一起加油！ 大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈。