如何在 JavaScript 中同時執行多個非同步操作？-js教程-PHP中文網

如何在 JavaScript 中同時執行多個非同步操作？

Patricia Arquette

發布： 2024-12-07 22:41:17

原創

992 人瀏覽過

How Can I Run Multiple Async Operations Concurrently in JavaScript?

並發執行多個非同步操作

問題：

在

問題：

const value1 = await getValue1Async();
const value2 = await getValue2Async();

登入後複製

在

問題：

在

問題：

在

問題：

const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);

登入後複製

在在在下面的程式碼中，非同步操作是依序執行的，而不是同時：

要並發運作操作，我們需要修改程式碼。

解：

TL;DR

使用 Promise.all而不是順序等待模式：
詳細資訊：

原始解決方案並行運行兩個操作，但等待第一個操作完成，然後再等待第二個操作。如果一個操作花費的時間明顯長於另一個操作，這可能會導致效能問題。

Promise.all 允許我們等待多個操作同時完成。它接受一個 Promise 數組並傳回一個 Promise，該 Promise 以與原始數組相同的順序解析為結果數組。

Promise.all 的優點：

並發執行操作

const getValue1Async = () => {
  return new Promise(resolve => {
    setTimeout(resolve, 500, "value1");
  });
};

const getValue2Async = () => {
  return new Promise((resolve, reject) => {
    setTimeout(reject, 100, "error");
  });
};

(async () => {
  try {
    console.time("Promise.all");
    const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);
  } catch (e) {
    console.timeEnd("Promise.all", e);
  }
})();

登入後複製

如果有任何承諾，則正確處理拒絕reject

更簡潔的代碼注意：請注意，如果第二個Promise 在第一個Promise解析之前被拒絕，則「取得「promise then wait it」模式可能會導致「未處理的拒絕」錯誤。這可以透過使用Promise.all 來避免。範例：這是使用Promise.all的修改範例：這段程式碼展示了 Promise.all 如何實現兩個非同步操作的並發執行，從而更快地完成。

以上是如何在 JavaScript 中同時執行多個非同步操作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！