自行實(shí)現(xiàn)Promise.allSettled的Polyfill處理

更新時(shí)間：2022年08月18日 14:13:29 作者：JerryWang_sap

這篇文章主要為大家介紹了自行實(shí)現(xiàn)Promise.allSettled?的?Polyfill處理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

如果因?yàn)闉g覽器太過老舊，不支持最新的 Promise.allSettled API，我們可以使用 polyfill 技術(shù)，簡單地自己用 Promise.all, 自行實(shí)現(xiàn) Promise.allSettled.

完整代碼實(shí)現(xiàn)如下：

if (!Promise.allSettled) {
  const rejectHandler = reason => ({ status: 'rejected', reason });
  const resolveHandler = value => ({ status: 'fulfilled', value });
  Promise.allSettled = function (promises) {
    const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler));
    return Promise.all(convertedPromises);
  };
}

在這段代碼中，promises.map 接受輸入值，使用 p => Promise.resolve(p) 將它們轉(zhuǎn)換為 Promise（以防傳遞了非 Promise 類型的 primitive 值），然后將 .then 處理程序添加到每個值。

該處理程序?qū)⒊晒Φ慕Y(jié)果值轉(zhuǎn)換為 {status:'fulfilled', value}，并將錯誤原因轉(zhuǎn)換為 {status:'rejected', reason}。這正是 Promise.allSettled 的格式。

現(xiàn)在我們可以使用 Promise.allSettled 來獲取所有給定 Promise 的結(jié)果，即使其中一些被 reject.

Promise.race

與 Promise.all 類似，但僅等待第一個已經(jīng) resolved 的 Promise 并獲取其結(jié)果（或錯誤）。

語法：

let promise = Promise.race(iterable);

下列代碼將會打印第一個狀態(tài)變?yōu)?fulfilled 的 Promise 的值，即1：

Promise.race([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

這里的第一個promise是最快的，所以就變成了結(jié)果。在第一個確定的 Promise win the race之后，所有進(jìn)一步的結(jié)果/錯誤都將被忽略。

Promise.any

與 Promise.race 類似，但只等待第一個 fulfilled 的 Promise 并獲得其結(jié)果。如果所有給定的 Promise 都被拒絕，則返回的 Promise 會被 AggregateError 拒絕——這是一個特殊的錯誤對象，它將所有 Promise 錯誤存儲在它的 errors 屬性中。

語法：

let promise = Promise.any(iterable);

下列例子結(jié)果為1：

Promise.any([
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

這里的第一個promise是最快的，但是被 reject 了，所以第二個promise就變成了結(jié)果。在第一個 fulfilled 的 Promise win the race 之后，所有進(jìn)一步的結(jié)果都將被忽略。

這是一個所有 Promise 都失敗的例子：

Promise.any([
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Ouch!")), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Error!")), 2000))
]).catch(error => {
  console.log(error.constructor.name); // AggregateError
  console.log(error.errors[0]); // Error: Ouch!
  console.log(error.errors[1]); // Error: Error!
});

如我們所見，失敗的 Promise 的錯誤對象在 AggregateError 對象的 errors 屬性中可用。

以上就是Promise.allSettled 的 Polyfill 處理的詳細(xì)內(nèi)容，更多關(guān)于Promise.allSettled Polyfill 處理的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: