Promise.all() 与 Promise.race(): 多个Promise的“大逃杀”与“大合唱”

大家好，欢迎来到今天的讲座！今天我们要聊的是 JavaScript 中两个非常重要的 Promise 方法：Promise.all() 和 Promise.race()。这两个方法在处理多个 Promise 时有着截然不同的行为，一个像是“大合唱”，另一个则像是“大逃杀”。让我们一起来看看它们的区别和使用场景吧！

1. Promise.all(): “大合唱”的力量

想象一下，你正在组织一场音乐会，所有的乐器都要在同一时间开始演奏，才能奏出美妙的音乐。Promise.all() 就像是这场音乐会的指挥家，它会等待所有的 Promise 都完成（无论是成功还是失败），然后才会继续执行后续的代码。

语法

Promise.all(iterable)

• iterable：一个可迭代对象（如数组），里面包含多个 Promise。

行为

• Promise.all() 会返回一个新的 Promise。
• 如果所有传入的 Promise 都成功解决（resolved），那么这个新的 Promise 也会成功，并且它的结果是一个包含所有 Promise 结果的数组。
• 如果有任何一个 Promise 被拒绝（rejected），那么整个 Promise.all() 会立即被拒绝，并且只会返回第一个被拒绝的 Promise 的原因。

代码示例

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log('所有 Promise 都成功了:', values); // 输出: [1, 2, 3]
  })
  .catch(error => {
    console.error('有一个 Promise 失败了:', error);
  });

实际应用场景

• 并发请求：当你需要同时发起多个 API 请求，并且只有在所有请求都成功后才继续执行下一步操作时，Promise.all() 是最合适的选择。比如，你可能需要从多个 API 获取用户信息、订单信息和产品信息，只有当所有数据都准备好时，才能渲染页面。

注意事项

• 如果任何一个 Promise 失败，整个 Promise.all() 会立即失败。因此，如果你希望即使有部分 Promise 失败也能继续执行，可以考虑使用 Promise.allSettled()，它会等待所有 Promise 完成，无论成功或失败。

---

2. Promise.race(): “大逃杀”的速度

现在，我们来聊聊 Promise.race()。想象一下，你正在参加一场赛跑比赛，只要有人冲过终点线，比赛就结束了。Promise.race() 就像是这场比赛的裁判，它会等待第一个完成的 Promise（无论是成功还是失败），然后立即结束比赛，忽略其他还在进行中的 Promise。

语法

Promise.race(iterable)

• iterable：一个可迭代对象（如数组），里面包含多个 Promise。

行为

• Promise.race() 会返回一个新的 Promise。
• 这个新的 Promise 会在第一个传入的 Promise 成功或失败时立即完成，并且它的结果是第一个完成的 Promise 的结果。
• 其他未完成的 Promise 会被忽略。

代码示例

const promise1 = new Promise((resolve) => setTimeout(() => resolve('慢'), 5000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('快'), 1000));

Promise.race([promise1, promise2])
  .then(value => {
    console.log('第一个完成的 Promise:', value); // 输出: "快"
  })
  .catch(error => {
    console.error('有一个 Promise 失败了:', error);
  });

实际应用场景

• 超时控制：Promise.race() 常用于设置超时机制。例如，你可能希望在一个 API 请求超过一定时间后自动取消请求，并返回一个超时错误。你可以创建一个超时的 Promise，并将其与实际的 API 请求一起传递给 Promise.race()，这样如果 API 请求在规定时间内没有完成，超时的 Promise 会首先完成，从而触发超时处理逻辑。

注意事项

• Promise.race() 只关心第一个完成的 Promise，因此如果你有多个 Promise，其中有些可能会被忽略。如果你希望确保所有 Promise 都能完成，应该使用 Promise.all() 或 Promise.allSettled()。

---

3. 对比表格：Promise.all() vs Promise.race()

为了更直观地理解两者的区别，我们可以通过一个表格来对比它们的行为：

特性	Promise.all()	Promise.race()
等待所有 Promise	是，必须等到所有 Promise 都完成	否，只等待第一个完成的 Promise
返回结果	所有 Promise 的结果数组	第一个完成的 Promise 的结果
处理失败的情况	只要有一个 Promise 失败，整个调用就会失败	第一个失败的 Promise 会导致整个调用失败
适用场景	并发请求，所有任务都必须完成	超时控制，只需要第一个完成的任务

---

4. 小结

通过今天的讲座，我们了解了 Promise.all() 和 Promise.race() 的不同之处。Promise.all() 更像是一个“大合唱”，它会等待所有的 Promise 都完成，适合并发请求的场景；而 Promise.race() 则像是一个“大逃杀”，它只关心第一个完成的 Promise，适合需要快速响应或设置超时的场景。

希望今天的分享对你有所帮助！如果你还有任何问题，欢迎在评论区留言讨论。下次见！