Promise.all()-js教程-PHP中文網

Promise.all()

DDD

發布： 2025-01-21 12:34:16

原創

542 人瀏覽過

Promise.all()

深入理解JavaScript中的Promise.all()

Promise.all()是JavaScript中一個強大的方法，用於同時處理多個非同步操作。它接收一個可迭代物件（通常是數組），其中包含多個Promise，並傳回一個單一的Promise。只有當所有輸入的Promise都成功解析時，這個單一Promise才會解析；如果任何一個Promise被拒絕，則該單一Promise會立即被拒絕。本指南將探討Promise.all()的功能、語法、行為以及實際範例。

文法

Promise.all()的語法很簡單：

<code class="language-javascript">Promise.all(iterable);</code>

登入後複製

iterable: 包含Promise或值的陣列或其他可迭代物件。非Promise值將被視為已解析的Promise。

傳回值

此方法傳回一個Promise，具有以下行為：

如果iterable為空，則立即以空數組解析。
如果iterable中的所有Promise都已成功，則解析為一個包含已成功值的數組，並保持其原始順序。
如果任何一個Promise被拒絕，則立即被拒絕，並返回第一個被拒絕的Promise的理由，忽略所有其他Promise的結果。

成功與失敗

成功: 當所有Promise都成功解析時，Promise.all()傳回一個結果數組，其順序與輸入Promise的順序相同。
失敗: 如果任何一個Promise被拒絕，Promise.all()將立即被拒絕，並返回該Promise的拒絕原因。

實際範例

範例1：基本用法

在這個例子中，我們建立三個Promise，它們在不同的超時後解析：

<code class="language-javascript">const promise1 = new Promise((resolve) => setTimeout(() => resolve('One'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('Two'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('Three'), 3000));

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values)) // 输出: ['One', 'Two', 'Three']
  .catch(error => console.error(error));</code>

登入後複製

在這裡，Promise.all()等待所有三個Promise都解析，然後將它們的結果作為一個數組記錄到控制台。

範例2：混合值處理

你也可以混合解析的值和Promise：

<code class="language-javascript">const p1 = Promise.resolve(42);
const p2 = Promise.resolve('Hello');
const p3 = new Promise((resolve) => setTimeout(() => resolve('World'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values)) // 输出: [42, 'Hello', 'World']
  .catch(error => console.error(error));</code>

登入後複製

在這種情況下，p1和p2立即解析，而p3在一秒鐘後解析。

範例3：失敗處理

如果其中一個Promise被拒絕，Promise.all()將立即被拒絕：

<code class="language-javascript">const p1 = Promise.resolve(42);
const p2 = Promise.reject(new Error('Failed!'));
const p3 = new Promise((resolve) => setTimeout(() => resolve('This will not run'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values))
  .catch(error => console.error(error.message)); // 输出: 'Failed!'</code>

登入後複製

這裡，因為p2被拒絕，整個操作失敗並記錄錯誤訊息。

`Promise.all()`的應用場景

取得多個資源: 當你需要同時從多個API取得數據，並在處理所有回應之前等待時。
並行處理: 同時執行多個獨立的任務，並且需要將它們的結果組合在一起時。
批次操作: 執行批次更新或計算，其中每個操作都可以獨立完成時。

結論

Promise.all()是管理JavaScript中多個非同步操作的基本工具。它透過允許開發人員等待多個Promise解析後再繼續執行其他邏輯來簡化程式碼。但是，正確處理失敗至關重要，因為任何一個Promise的失敗都會導致整個操作失敗。理解如何有效地使用Promise.all()可以編寫更簡潔、更有效率的非同步程式碼。