深入理解 Promise.all() 的行为与应用

Promise.all() 工作原理详解

Promise.all() 是一个静态方法，它接收一个由 Promise 实例组成的可迭代对象（例如数组），并返回一个新的 Promise。这个返回的 Promise 在以下两种情况下会发生状态变化：

1. 所有输入 Promise 都成功（fulfilled）时：返回的 Promise 会成功，其结果是一个数组，包含所有输入 Promise 的成功值，并且这些值会按照输入 Promise 的原始顺序排列。
2. 任何一个输入 Promise 失败（rejected）时：返回的 Promise 会立即失败，其失败原因就是第一个失败的 Promise 的失败原因。

关键在于，Promise.all() 返回的是一个单一的 Promise，它的 .then() 回调只会在所有内部 Promise 都成功后被调用一次，并且接收到的参数是所有结果的一个数组。

案例分析：理解 Promise.all 的输出行为

为了更好地理解 Promise.all() 的行为，我们来看一个常见的混淆点。考虑以下代码示例：

// 一个简单的 Promise，在给定时间后解决
const timeOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`);
    }, t);
  });
};

// 独立解析一个 Promise
timeOut(1000)
  .then(result => console.log(result)); // 预计输出: Completed in 1000

// 使用 Promise.all
Promise.all([timeOut(1000), timeOut(2000), timeOut(2000)])
  .then(result => console.log(result));

许多开发者可能会预期输出如下：

Completed in 1000
Completed in 2000
Completed in 2000
['Completed in 1000', 'Completed in 2000', 'Completed in 2000']

然而，实际运行代码后，输出可能更接近：

Completed in 1000
['Completed in 1000', 'Completed in 2000', 'Completed in 2000']

为什么会这样？

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

原因在于，Promise.all() 不会“触发”其内部 Promise 的独立 .then() 回调。它只关心这些 Promise 的最终状态和它们解析（或拒绝）的值。

1. timeOut(1000).then(result => console.log(result))：这是一个独立的 Promise 链。当 timeOut(1000) 在 1000 毫秒后解决时，其 .then() 回调会被触发，并打印出 Completed in 1000。
2. Promise.all([timeOut(1000), timeOut(2000), timeOut(2000)]).then(result => console.log(result))：这里的 Promise.all 接收三个 Promise。它会等待所有这三个 Promise 都解决。
   • 第一个 timeOut(1000) 在 1000 毫秒后解决。
   • 第二个 timeOut(2000) 在 2000 毫秒后解决。
   • 第三个 timeOut(2000) 在 2000 毫秒后解决。 Promise.all 返回的 Promise 会在所有内部 Promise 都解决后（即大约 2000 毫秒后，因为最长的延迟是 2000 毫秒）才解决。此时，它的 .then() 回调被调用，并接收到一个包含所有结果的数组 ['Completed in 1000', 'Completed in 2000', 'Completed in 2000']，然后将其打印出来。

因此，你只会看到一个独立的 Completed in 1000 输出（来自第一个独立的 Promise），以及一个包含所有结果的数组输出（来自 Promise.all）。内部传递给 Promise.all 的 Promise 本身并没有连接 .then() 来进行独立打印。

正确使用 Promise.all 的示例

如果你希望在 Promise.all 聚合结果的同时，也能看到每个 Promise 的独立进展或处理，你需要为每个 Promise 单独添加 .then() 回调，或者在构建 Promise 数组时就进行处理。

const timeOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Promise ${t} started.`); // 可以看到每个 Promise 的启动
      resolve(`Completed in ${t}`);
    }, t);
  });
};

// 组合 Promise，并在 Promise.all 中处理聚合结果
const p1 = timeOut(1000);
const p2 = timeOut(2000);
const p3 = timeOut(1500);

Promise.all([p1, p2, p3])
  .then(results => {
    console.log("All promises resolved:", results); // 聚合结果
  })
  .catch(error => {
    console.error("One of the promises rejected:", error);
  });

// 如果需要每个 Promise 独立处理，可以在传入 Promise.all 之前进行
const p4 = timeOut(500).then(res => {
    console.log(`Individual promise 500ms resolved: ${res}`);
    return res; // 确保将结果返回，以便 Promise.all 也能获取到
});

const p5 = timeOut(1200);

Promise.all([p4, p5])
  .then(results => {
    console.log("All promises (with one individual handler) resolved:", results);
  });

在这个例子中，console.log("Promise X started.") 会在每个 Promise 内部的 setTimeout 开始时打印，展示了它们的并发执行。而 Promise.all 的 .then() 则会在所有 Promise 都完成后，打印最终的聚合结果。

注意事项

1. 错误处理：Promise.all() 是“全有或全无”的。如果其内部的任何一个 Promise 失败，Promise.all() 返回的 Promise 就会立即拒绝，并带上第一个拒绝的原因。此时，其他尚未完成的 Promise 仍然会继续执行，但它们的成功或失败将不再影响 Promise.all() 的最终状态。为了捕获错误，应在 Promise.all() 后面添加 .catch()。

   Promise.all([
     Promise.resolve('Success 1'),
     Promise.reject('Error occurred!'), // 这个 Promise 会导致 Promise.all 拒绝
     Promise.resolve('Success 3')
   ])
   .then(results => console.log(results))
   .catch(error => console.error("Caught by Promise.all's catch:", error));
   // 输出: Caught by Promise.all's catch: Error occurred!

   登录后复制
2. Promise 顺序：Promise.all() 返回的结果数组的顺序与传入的可迭代对象中的 Promise 顺序保持一致，与它们实际完成的顺序无关。
3. 空迭代器：如果传入一个空的可迭代对象（如空数组），Promise.all() 将立即成功，并返回一个空数组。

   Promise.all([])
     .then(results => console.log("Empty array results:", results)); // 输出: Empty array results: []

   登录后复制
4. 非 Promise 值：如果可迭代对象中包含非 Promise 值，Promise.all() 会将其视为已成功的 Promise，并直接将其值包含在结果数组中。

   Promise.all([Promise.resolve(1), 'hello', 3])
     .then(results => console.log(results)); // 输出: [1, 'hello', 3]

   登录后复制

总结

Promise.all() 是处理并发异步操作的强大工具，它提供了一种简洁的方式来等待多个 Promise 完成并聚合它们的成功结果。理解其核心机制——返回一个单一的 Promise，并在所有内部 Promise 成功后一次性返回一个结果数组——对于避免常见的误解至关重要。正确地使用 Promise.all()，结合适当的错误处理，能够显著提升 JavaScript 异步代码的效率和可维护性。

以上就是深入理解 Promise.all() 的行为与应用的详细内容，更多请关注php中文网其它相关文章！