如何在 JavaScript 中同时运行多个异步操作？-js教程-PHP中文网

如何在 JavaScript 中同时运行多个异步操作？

Patricia Arquette

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

原创

993 人浏览过

How Can I Run Multiple Async Operations Concurrently in JavaScript?

并发执行多个异步操作

问题：

在下面的代码中，异步操作是按顺序执行的，而不是同时：

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

登录后复制

要并发运行操作，我们需要修改代码。

解决方案：

TL;DR

使用 Promise.all 而不是顺序等待模式：

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

登录后复制

详细信息：

原始解决方案并行运行两个操作，但等待第一个操作完成，然后再等待第二个操作。如果一个操作花费的时间明显长于另一个操作，这可能会导致性能问题。

Promise.all 允许我们等待多个操作同时完成。它接受一个 Promise 数组并返回一个 Promise，该 Promise 以与原始数组相同的顺序解析为结果数组。

Promise.all 的优点：

并发执行操作
如果有任何承诺，则正确处理拒绝reject
更简洁的代码

注意：

请注意，如果第二个 Promise 在第一个 Promise 解析之前被拒绝，则“获取“promise then wait it”模式可能会导致“未处理的拒绝”错误。这可以通过使用 Promise.all 来避免。

示例：

这是使用 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);
  }
})();

登录后复制

这段代码展示了 Promise.all 如何实现两个异步操作的并发执行，从而更快地完成。

以上是如何在 JavaScript 中同时运行多个异步操作？的详细内容。更多信息请关注PHP中文网其他相关文章！