如果因為瀏覽器太過老舊，不支援最新的 Promise.allSettled API，我們可以使用 polyfill 技術，簡單地自己用 Promise.all, 自行實現 Promise.allSettled.

完整程式碼實現如下：

```javascript
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)` 將它們轉換為 Promise（以防傳遞了非 Promise 型別的 primitive 值），然後將 .then 處理程式新增到每個值。

該處理程式將成功的結果值轉換為 `{status:'fulfilled', value}`，並將錯誤原因轉換為 `{status:'rejected', reason}`。 這正是 `Promise.allSettled` 的格式。

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

# Promise.race

與 Promise.all 類似，但僅等待第一個已經 resolved 的 Promise 並獲取其結果（或錯誤）。

語法：

```javascript
let promise = Promise.race(iterable);
```

下列程式碼將會列印第一個狀態變為 fulfilled 的 Promise 的值，即1：

```javascript
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是最快的，所以就變成了結果。 在第一個確定的 Promise `win the race`之後，所有進一步的結果/錯誤都將被忽略。

# Promise.any

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

語法：

```javascript
let promise = Promise.any(iterable);
```

下列例子結果為1：

```javascript
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就變成了結果。 在第一個 fulfilled 的 Promise `win the race` 之後，所有進一步的結果都將被忽略。

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

```javascript
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 處理

相關文章