開始
一文搞懂 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,
})
)
)
);
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551454.html
標籤：其他
上一篇：收集專案中用到的工具函式
下一篇：返回列表