ES11的Promise.allSettled

2023-12-12 22:30:39

小编最近因为一些自己的问题，没有更新文章。今天刚好有一点精神头，特意来更新一下，今天和大家一起探讨的是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高阶函数进一步筛选数据。又是增加技能的一天，大家一起加油！

ES11的Promise.allSettled

码农公寓

相关文章