1. 如何使用 Promise.allSettled()判斷接口請求完畢

使用 Promise.allSettled() 來判斷多個接口請求是否全部完成是非常直觀和直接的。

Promise.allSettled() 方法會等待所有的 Promise 對象都完成（無論是成功還是失?。?，然后返回一個包含每個 Promise 結果的數組。

每個結果對象都包含了 status 屬性，可以是 "fulfilled"（成功）或 "rejected"（失?。?，以及 value 或 reason 屬性，分別表示成功或失敗時的結果。

下面是一個具體的示例，展示如何使用 Promise.allSettled() 來判斷多個接口請求是否全部完成：

1.1. 示例代碼

假設我們需要從三個不同的 API 端點獲取數據，并在所有請求完成后執行一些操作。

1.1.1. 定義請求函數

首先，定義一個函數來發起請求，并返回一個 Promise 對象。

function fetchAPI(url) {
  return fetch(url).then(response => {
    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`);
    }
    return response.json();
  });
}

1.1.2. 使用 Promise.allSettled()

接下來，使用 Promise.allSettled() 來等待所有的請求完成。

const apiUrls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

const fetchRequests = apiUrls.map(url => fetchAPI(url));

Promise.allSettled(fetchRequests)
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Request ${index + 1} succeeded:`, result.value);
      } else {
        console.error(`Request ${index + 1} failed:`, result.reason);
      }
    });
    // 所有請求完成，可以在這里執行其他操作
    console.log('All requests have been processed.');
  })
  .catch(error => {
    console.error('An unexpected error occurred:', error);
  });

1.2. 代碼解釋

1. 定義請求函數：

• fetchAPI 函數接收一個 URL 參數，使用 fetch 發起請求，并返回一個 Promise。
• 如果請求成功，Promise 會被解析為 JSON 數據。
• 如果請求失敗，Promise 會被拒絕，并拋出錯誤。

2. 使用 Promise.allSettled()：

• 創建一個包含所有請求的數組 fetchRequests。

• 使用 Promise.allSettled() 等待所有請求完成。

• results 數組包含了每個請求的結果對象，其中每個對象都有 status 和 value 或 reason 屬性。

• 根據每個請求的狀態，打印成功或失敗的信息。

1.3. 總結

通過使用 Promise.allSettled()，你可以確保在所有請求完成之后再執行后續的操作。

這種方法的好處在于它能處理成功和失敗的情況，并且提供了每個請求的完整結果，使得你可以根據每個請求的狀態來做出相應的處理。

如果你需要在所有請求完成之后執行某些操作，可以將這些操作放在 Promise.allSettled() 的回調函數中。

此外，你還可以根據實際需求調整錯誤處理邏輯，例如記錄錯誤信息或重新發起失敗的請求。