,,

^{<thead id="1wer0"></thead>}

在 JavaScript 中映射 Promises

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2024年12月30日 21:15 本文熱度 601

你是否遇到過這樣的情況：你期望你的 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();