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

2023-07-29,,

开始

一文搞懂 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 来做错误捕获
对象中还有另外两个属性,valuereason。根据 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,
})
)
)
);
};
}

一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。