Promise 三兄弟：.all(), .race(), .allSettled()

2023-10-17 21:47:46

在 JavaScript 的世界里，Promise 是异步编程的利器，而在 Promise 中，.all(), .race(), .allSettled() 这三个方法可谓是鼎足而立的三兄弟，它们在不同的场景下有着不同的妙用。

.all()：守望相助，共创佳绩

.all() 方法就像一个严谨的团队领导，它会等待所有 Promise 都执行完毕，才会返回一个包含所有结果的数组。如果其中有任何一个 Promise 出错，.all() 也会以一个包含错误消息的数组返回失败结果。

比如我们同时发出三个网络请求：

Promise.all([
  fetch('user-data.json'),
  fetch('order-history.json'),
  fetch('payment-details.json')
]).then(responses => {
  // 所有请求都成功后才会执行
  // responses 是一个包含三个 Response 对象的数组
});

.race()：竞速争锋，一骑绝尘

与 .all() 相反，.race() 方法更像是一个竞速比赛，它只关心哪个 Promise 最先执行完毕。当第一个 Promise 完成时，.race() 就会立刻返回它的结果，而不管其他 Promise 的状态。

Promise.race([
  fetch('slow-api.json'),
  fetch('fast-api.json')
]).then(response => {
  // 两个请求中哪一个先返回就会执行
  // response 是一个 Response 对象
});

.allSettled()：不抛弃，不放弃

.allSettled() 方法则是这三兄弟中最包容的一个，它会等待所有 Promise 都执行完毕，无论它们是成功还是失败，然后返回一个包含所有结果和状态的数组。

这样我们就不用担心某个 Promise 出错导致其他 Promise 无法执行：

Promise.allSettled([
  fetch('user-data.json'),
  fetch('order-history.json'),
  fetch('payment-details.json')
]).then(results => {
  // 所有请求都执行完毕后才会执行
  // results 是一个包含所有 Promise 结果和状态的数组
});