首頁 > web前端 > js教程 > 如何在 JavaScript 中同時執行多個非同步操作?

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

Patricia Arquette
發布: 2024-12-07 22:41:17
原創
1037 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板