為什麼 `await arr.map()` 失敗，`Promise.all` 如何修復它？

了解Async Await 和Array.map Synergy

在程式碼片段中：

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
});

您會收到錯誤「TS2322：鍵入「TS2322：鍵入」 Promise<” ;number>[]' 不可指派給型別'number[]'」。此錯誤表示預期類型 (number[]) 和實際類型 (Promise[]) 之間不符。為了解決這個問題，我們需要了解 async wait 和 Array.map 是如何互動的。

問題

問題的出現​​是因為你試圖等待一個陣列Promise (Promise[])，這與等待單一 Promise 不同。當應用於不是 Promise 的物件時，await 只是立即傳回值。在這種情況下，由於您正在等待 Promise 物件數組，因此結果值是數組本身 (Promise[])。

解決方案

要修正此錯誤，您可以使用 Promise.all 將 Promise[] 陣列轉換為單一 Promise。根據 MDN 文檔，一旦可迭代參數中的所有 Promise 都解析，Promise.all 就會解析。在程式碼中，可迭代參數是 arr.map 傳回的 Promise 陣列。

透過使用Promise.all，您可以將Promise 陣列轉換為單一Promise，從而使您能夠等待所有Promise 的解決方案

var arr = [1, 2, 3, 4, 5];

var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));

或者，根據您的具體用途考慮使用Promise .allSettled、Promise.any 或Promise.race 案件。但是，對於您提供的場景，Promise.all 仍然是最合適的選擇。

以上是為什麼 `await arr.map()` 失敗，`Promise.all` 如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！