如何使用 Promise.all() 同时管理多个 Promise

JavaScript 中的异步编程允许资源密集型操作在后台运行，而不会中断主线程。 API 调用和文件处理等操作是一些应该异步运行的操作。

承诺。 all() 是一个功能强大的函数，可以同时管理这些操作。本文将介绍如何使用 Promise.all()

让我们开始吧。

什么是承诺

promise 是一个表示异步事件最终失败或完成的对象。让我们看一个简单的承诺。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise 接受一个带有两个参数的函数：resolve 和reject。在我们的示例中，如果操作成功（即，如果 userId===1，则 Promise 将解析。如果操作失败，则 Promise 将被拒绝。

Promise 的生命周期从待定状态开始，最终要么被实现，要么被拒绝。目前，该承诺仍在等待中。为了使用 Promise，我们调用 .then() 来处理结果。

输出将是用户数据（如果满足）或错误（如果拒绝）。

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

既然操作成功，承诺就会兑现。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

如果我们更改 userId 的值，promise 将被拒绝，并且您将收到错误 User not found

假设您有多个 Promise，您将像这样独立处理每个 Promise：

const promise1 = new Promise((resolve, reject) => resolve(1));
const promise2 = new Promise((resolve, reject) => resolve(2));
const promise3 = new Promise((resolve, reject) => resolve(3));
promise1
  .then((value) => {
    console.log(value);
    promise2
      .then((value) => {
        console.log(value);
        promise3
          .then((value) => {
            console.log(value);
          })
          .catch((err) => {
            console.log("promise3 error", err);
          });
      })
      .catch((err) => {
        console.log("promise2 error", err);
      });
  })
  .catch((err) => {
    console.log("promise1 error", err);
  });

上述执行过程中会出现一些潜在问题：

• 每个 Promise 在前一个 Promise 完成后运行。 Promise2 将在 Promise1 解析后启动，Promise3 将在 Promise2 解析后启动；这会减慢执行速度。

• .then 链接中的嵌套结构导致 “回调地狱”，使代码更难阅读和维护。

• 每个错误都是独立处理的，这增加了更多的复杂性。

更好的方法是使用 Promise.all()，它允许 Promise 同时运行，从而提高性能和错误处理

使用 Promise.all() 增强异步操作

Promise.all() 接受可迭代的 Promise 并返回单个 Promise。语法如下：

Promise.all(iterable)

如果我们使用 Promise.all() 在前面的例子中，我们有这样的东西：

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((err) => {
    console.log("promise all error", err);
  });

如您所见，这种方法更简洁、更容易理解。

JavaScript 是一种单线程语言，这意味着每段代码都会等待前一段代码完成后才能执行下一段代码。

如果 JavaScript 是单线程的，Promise.all() 如何处理多个 Promise？

Promise.all() 遵循并发原则，这意味着所有的 Promise 不一定在同一时刻开始执行，而是在不等待一个 Promise 完成后再开始下一个 Promise 的情况下启动。

Promise.all() 仅当可迭代中的所有 Promise 都满足时才会解析，但是，如果可迭代中的任何 Promise 拒绝，Promise.all() 将立即拒绝并忽略其余 Promise 的结果。

实际例子

Promise.all() 擅长于需要执行多个独立的异步操作并等待所有操作完成后再继续的场景。

让我们看一下其中一些示例，其中 Promise.all() 可用于提高实际应用程序的效率。

1.从多个API获取数据

考虑一个场景，您正在开发一个同时从两个不同 API 获取数据的应用程序。

让我们尝试从多个 API 中顺序获取数据，并记录完成请求所需的时间。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

这是输出：

处理请求所需的时间为 50.36 毫秒。该执行时间可以改进。为了说明并发的好处，让我们比较一下使用 Promise.all()
的方法

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

这里我们使用 Promise.all() 来同时运行多个异步操作。 Promise.all() 将接受一组 Promise，并在所有 Promise 解决后返回一个 Promise。

这是输出。

从输出中，我们可以看到使用 Promise.all() 的效率稍高：出现这种改进是因为 Promise.all() 允许两个操作同时启动，而不是等待一个操作完成后再启动另一个操作。

在具有更复杂操作或额外 API 调用的实际应用程序中，使用 Promise.all() 的性能提升可能更加显着。

但是，如果你想等待所有的 Promise 都结算，无论它们是履行还是拒绝，你可以使用 Promise.allSettled()

1. 发送多个数据块 假设您有一组代表客户反馈或评论的文本块，并且您需要通过将其发送到外部 API 进行分析来分析每个块的情绪。

在这种情况下，所有数据需要同时发送。在这种情况下，您可以使用 Promise.all() 并发发送所有请求，然后等待所有请求解析后再获取结果。

例如，假设我们需要分析这个样本数据：

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

这种情况下，需要一次性发送所有数据；顺序发送数据将非常耗时。相反，我们将使用 Promise.all() 同时发起多个 API 调用。

你会得到这样的东西：

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

3. 同时读取和处理多个文件。

假设您有一个接受用户批量上传的应用程序。采取所有必要的措施来验证文件后，您可以使用 Promise.all() 并行执行多个文件读取。这比按顺序逐个读取每个文件要高效得多。

如果没有 Promise.all()，您将必须等待每个文件完全读取才能读取下一个文件。这会导致更多的处理时间，特别是如果您有大量文件。

但是，使用 Promise.all()，所有文件读取操作都会同时启动，从而节省大量时间并提供出色的用户体验。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

还需要注意的是，当同时读取许多大文件时，您应该注意潜在的内存问题。

概括

总之，Promise.all() 提供了很多好处，总结如下

更简洁的代码： Promise.all() 使您的代码更易于理解，因为您没有嵌套的 .then() 链。请求在单个 .then() 块中处理。

高效：通过并发发出请求，应用程序的整体性能会提高，因为获取数据所需的总时间会减少。

提升你的 JavaScript 水平

将实用的 JavaScript 技巧和代码片段发送到您的收件箱。加入 1000 名编写更好代码的开发人员行列。

以上是如何使用 Promise.all() 同时管理多个 Promise的详细内容。更多信息请关注PHP中文网其他相关文章！