引言

如果因?yàn)闉g覽器太過(guò)老舊，不支持最新的 Promise.allSettled API，我們可以使用 polyfill 技術(shù)，簡(jiǎn)單地自己用 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 處理程序添加到每個(gè)值。

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

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

Promise.race

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

語(yǔ)法：

let promise = Promise.race(iterable);

下列代碼將會(huì)打印第一個(gè)狀態(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

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

Promise.any

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

語(yǔ)法：

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

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

這是一個(gè)所有 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!
});

如我們所見(jiàn)，失敗的 Promise 的錯(cuò)誤對(duì)象在 AggregateError 對(duì)象的 errors 屬性中可用。

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