一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill
开始
一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill
allSettled 的用法
const runAllSettled = async () => {
const successPromise = Promise.resolve('success') // 一个正常返回的 Promise
const failPromise = Promise.reject('fail') // 一个异常返回的 Promise
// 使用 allSettled
const settiled = await Promise.allSettled([successPromise, failPromise, undefined, null])
console.log(settiled)
/* 输出结果如下
[
{status: 'fulfilled', value: 'success'},
{status: 'rejected', reason: 'fail'},
{status: 'fulfilled', value: undefined},
{status: 'fulfilled', value: null},
]
*/
}
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.all |
Promise.allSettled |
|---|---|---|
| 并发 | ? | ? |
并发Promise中出现 reject 是否还走 then |
? | ? |
在不支持 Promise.allSettled 新特性的环境下实现一个 Polyfill
// 通过 Promise.all 实现 Promise.allSettled
if (!Promise.allSettled) {
Promise.allSettled = function (promises) {
return Promise.all(
promises.map((p) =>
Promise.resolve(p).then(
(value) => ({
status: "fulfilled",
value,
}),
(reason) => ({
status: "rejected",
reason,
})
)
)
);
};
}
当下敲的每一个字母,都将在未来的某天回报于自己~