你是否遇到過這樣的情況：你期望你的 map 函數返回一個已解決/等待的值，但它卻返回了一個包含多個 promises 的列表。例如：
const result = ids.map(async (id) => {
return await fetch(id);
});
// 期望結果：[{ name: "Adam" }, { name: "Linda" }]
// 實際結果：[Promise {<pending>}, Promise {<pending>}, ...]
你并不孤單。我在配對編程中也遇到過這種情況幾次。本文將展示如何在 async/await 操作中進行映射。
準備好了嗎？讓我們開始。
問題
想象一下：你拿到了一個需要異步處理的項目數組。也許這些項目代表 ID，你需要為每個 ID 獲取數據。這是一個常見的錯誤：
const ids = [1, 2, 3, 4, 5];
const fetchData = async (id) => {
// 模擬異步獲取操作
return `data for ${id}`;
};
const processItems = async () => {
const result = ids.map(async (id) => {
return await fetchData(id);
});
console.log(result); // [Promise {<pending>}, Promise {<pending>}, ...]
};
processItems();
好的，這里出了什么問題呢？?? map 函數返回了一個 promises 數組，并沒有等待它們解決。這不是我們想要的，并且在稍后嘗試使用 result 時可能會導致混亂。
for…of 循環解決方案
一種方法是使用 for...of 循環。如果你的異步操作需要按順序發生而不是并行執行，這將非常有用。
const processItemsSequentially = async () => {
const result = [];
for (const id of ids) {
const data = await fetchData(id);
result.push(data);
}
console.log(result); // ['data for 1', 'data for 2', ...]
};
processItemsSequentially();
如果你的目標是順序執行，這將更容易閱讀和理解，但要小心——這種方法可能會更慢，因為每個操作都等待前一個操作完成。
Promise.all 解決方案
讓我們使用 Promise.all 和 Array.prototype.map() 來清理這個問題。這個巧妙的方法可以將我們的 promises 數組包裝成一個單一的 promise，當所有 promises 解決時，它將解決。
const processItems = async () => {
const result = await Promise.all(
ids.map((id) => {
return fetchData(id);
})
);
console.log(result); // ['data for 1', 'data for 2', ...]
};
processItems();
太好了！現在我們正在高效地工作。promises 數組被包裝在一個單一的 promise 中，它將用結果解決。好多了，并且是并發運行的！然而，有一個問題。并發運行 promises（例如，有 1000 個項目）并不總是意味著快速。它可能會變慢，并可能導致內存問題。
提示：你可以選擇在這個例子中使用 promise.all() 或 promise.allSettled()。
使用 p-map 的更清晰解決方案
最后，讓我們看看一個更好的并發映射方法，同時限制應該同時運行的 promises 數量。為此，我們將使用 npm 上的 p-map。你可以使用 npm install p-map 將其添加到你的項目中。
它與 Promise.all() 不同，因為你可以控制并發限制，并決定在出現錯誤時是否停止迭代。以下是我們定義的 processItems() 函數的樣子：
import pMap from 'p-map';
const ids = [1, 2, 3, 4, 5];
const fetchData = async (id: number) => {
// 模擬異步獲取操作
return `data for ${id}`;
};
const processItems = async () => {
const result = await pMap(ids, (id) => fetchData(id), { concurrency: 2 });
console.log(result); // ['data for 1', 'data for 2', ...]
};
processItems();
雖然我們在這里使用了不同的語法，但這個版本是簡潔有效的。通過設置并發限制，這種模式避免了在有大量數據時系統過載，并且我們可以控制在出現錯誤時是否停止或繼續。有關 p-map 的更多選項，請查看 GitHub 上的文檔。
結論
就是這樣，朋友們！我們探討了在映射 promises 時的一個常見錯誤，并涵蓋了三種有效的解決方案：
- 使用
Promise.all 進行并行執行 ????
我希望這能幫助你成為一個Promise映射專家！編碼愉快！??
原文地址：https://www.telerik.com/blogs/mapping-promises-javascript
閱讀原文：原文鏈接
該文章在 2024/12/31 11:37:53 編輯過
400 186 1886
