【JS】期约的Promise.all()和 Promise.race()区别

概述

Promise.all() 和 Promise.race() 都是 JavaScript 中处理多个异步操作的 Promise 方法，但它们的行为和返回结果有所不同。

Promise.all()和Promise.race()

1. Promise.all()

Promise.all() 接受一个由多个 Promise 实例组成的可迭代对象（例如数组），并返回一个新的 Promise。当所有传入的 Promise 都成功解决时，Promise.all() 返回一个新的 Promise，该 Promise 的结果是所有输入 Promise 的结果组成的数组；如果任何一个输入的 Promise 被拒绝（即 reject），Promise.all() 会立即返回一个拒绝的 Promise，并且拒绝的原因是第一个被拒绝的 Promise 的原因。

[特点]

• 必须等待所有 Promise 都成功，或者其中一个 Promise 被拒绝，才会返回结果。
• 如果其中一个 Promise 被拒绝，Promise.all() 会立即返回拒绝的原因，不会继续等待其他 Promise。

示例：

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
const promise3 = Promise.resolve(42);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // [3, "foo", 42]
  })
  .catch((error) => {
    console.log(error); // 如果有一个Promise被拒绝，会进入catch
  });

如果其中一个 Promise 被拒绝：

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject("Error!");

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values);
  })
  .catch((error) => {
    console.log(error); // "Error!"
  });

2. Promise.race()

Promise.race() 也是接受一个包含多个 Promise 的可迭代对象，并返回一个新的 Promise。不同的是，Promise.race() 只会返回第一个解决或第一个被拒绝的 Promise 的结果。不管其他 Promise 是否已经解决或拒绝，Promise.race() 只关注第一个完成的 Promise。

[特点]

• 返回的是第一个解决（resolve）或第一个拒绝（reject）的 Promise 的结果。
• 无论其他 Promise 是否解决或拒绝，Promise.race() 都会立即返回第一个完成的结果。

示例：

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'foo'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'bar'));

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // "bar" (因为 promise2 先完成)
  })
  .catch((error) => {
    console.log(error);
  });

如果第一个拒绝的 Promise 被触发：

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'foo'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'error'));

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error); // "error" (因为 promise2 先拒绝)
  });

区别总结：

应用场景

• Promise.all() 适用于当多个异步任务必须都成功完成后才能继续处理后续操作的情况。例如，加载多个资源（如图片、脚本文件等）并在所有资源加载完成后再显示页面。

• Promise.race() 适用于当多个异步任务中只关心哪个任务最先完成的情况。例如，网络请求超时处理，或者多个可能的 API 请求，哪一个先返回就用哪个结果。