一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持

月夜踏歌

开始

一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持新特性的环境下实现一个 Polyfill

allSettled 的用法

1. const runAllSettled = async () => {
2.     const successPromise = Promise.resolve('success') // 一个正常返回的 Promise
3.     const failPromise = Promise.reject('fail') // 一个异常返回的 Promise
4.     // 使用 allSettled
5.     const settiled = await Promise.allSettled([successPromise, failPromise, undefined, null])
6.     console.log(settiled)
7.     /*  输出结果如下
8.             [
9.                 {status: 'fulfilled', value: 'success'},
10.                 {status: 'rejected', reason: 'fail'},
11.                 {status: 'fulfilled', value: undefined},
12.                 {status: 'fulfilled', value: null},
13.             ]
14.     */
15. }
16. runAllSettled()

复制代码

• 返回一个数组，每一个元素都是一个对象，里面必然包含 status 属性
  
• status 属性只会有两个值，fulfilled 或者 rejected，非黑即白的既视感
  
• allSettled 总是走 then 的，也就是并发的 Promise 出现 reject 也不会走 catch，需要自行遍历返回的数组，判断 status 来做错误捕获
  
• 对象中还有另外两个属性，value 和 reason。根据 promise 的状态返回，如果成功返回，即为 value，反之为 reason
  
• 更详细的 TS 类型在这里 lib.es2020.promise.d.ts
  

all 的用法

• all 的用法就不再详细赘述，可前往 MDN 查看
  

区别

功 能Promise.allPromise.allSettled并发✅✅并发Promise中出现 reject 是否还走 then❌✅在不支持 Promise.allSettled 新特性的环境下实现一个 Polyfill

1. // 通过 Promise.all 实现 Promise.allSettled
2. if (!Promise.allSettled) {
3.         Promise.allSettled = function (promises) {
4.                 return Promise.all(
5.                         promises.map((p) =>
6.                                 Promise.resolve(p).then(
7.                                         (value) => ({
8.                                                 status: "fulfilled",
9.                                                 value,
10.                                         }),
11.                                         (reason) => ({
12.                                                 status: "rejected",
13.                                                 reason,
14.                                         })
15.                                 )
16.                         )
17.                 );
18.         };
19. }

复制代码

来源:https://www.cnblogs.com/PeiQi1229/p/17362393.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！