请解释 Promise.all()、Promise.race()、Promise.allSettled() 和 Promise.any() 的作用和区别。

推荐答案

Promise.all()

• 作用： 接收一个 Promise 可迭代对象（通常是数组），并返回一个新的 Promise。
• 状态：
  • 如果所有输入的 Promise 都成功 fulfilled，则返回的 Promise 也成功 fulfilled，其值是按输入顺序排列的 fulfilled 值的数组。
  • 如果任何一个输入的 Promise rejected，则返回的 Promise 立即 rejected，并携带第一个 rejected 的原因。
• 用途： 适用于需要等待所有异步操作都完成后才能继续执行的情况。

Promise.race()

• 作用： 接收一个 Promise 可迭代对象，并返回一个新的 Promise。
• 状态：
  • 返回的 Promise 的状态和值与第一个 settled (fulfilled 或 rejected) 的 Promise 相同。
• 用途： 适用于只需要一个异步操作完成就继续执行的情况，例如超时处理或竞速场景。

Promise.allSettled()

• 作用： 接收一个 Promise 可迭代对象，并返回一个新的 Promise。
• 状态：
  • 返回的 Promise 在所有输入的 Promise 都 settled (fulfilled 或 rejected) 后才 settled。
  • 返回的 Promise 的值是一个数组，其中每个元素都描述了对应 Promise 的状态和值（如果 fulfilled）或原因（如果 rejected）。
• 用途： 适用于需要等待所有异步操作完成，并了解所有操作结果（无论成功或失败）的情况。

Promise.any()

• 作用： 接收一个 Promise 可迭代对象，并返回一个新的 Promise。
• 状态：
  • 如果任何一个输入的 Promise 成功 fulfilled，则返回的 Promise 也成功 fulfilled，其值是第一个 fulfilled 的值。
  • 如果所有输入的 Promise 都 rejected，则返回的 Promise rejected，并携带 AggregateError 错误对象，其中包含所有 rejected 的原因。
• 用途： 适用于只需要一个异步操作成功即可继续执行的情况，并且可以容忍所有失败，类似 Promise.race()，但只关心成功的结果。

本题详细解读

Promise.all() 的详细解读

Promise.all() 的核心在于**“全部成功才成功”** 的原则。它接收一个 Promise 数组，如果数组中所有 Promise 都成功完成 (fulfilled)，则 Promise.all() 返回的 Promise 也会成功完成，并且结果值是一个包含所有输入 Promise 的结果值的数组，数组的顺序与输入的 Promise 顺序一致。如果数组中任意一个 Promise 失败 (rejected)，则 Promise.all() 返回的 Promise 立即失败，并且失败的原因是第一个被拒绝的 Promise 的原因。

例子：

// www.javascriptcn.com code example
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
    .then(values => console.log(values)) // 输出 [1, 2, 3]
    .catch(error => console.error(error));

const promise4 = Promise.resolve(4);
const promise5 = Promise.reject('error5');
const promise6 = Promise.resolve(6);

Promise.all([promise4, promise5, promise6])
    .then(values => console.log(values))
    .catch(error => console.error(error)); // 输出 error5

Promise.race() 的详细解读

Promise.race() 的核心在于**“竞速”** 的概念。它接收一个 Promise 数组，返回一个新的 Promise，该 Promise 的状态和值由第一个 settled (fulfilled 或 rejected) 的 Promise 决定。它不关心其他 Promise 的状态，一旦有一个 Promise 完成（成功或失败），立即返回结果。

例子：

// www.javascriptcn.com code example
const promise1 = new Promise(resolve => setTimeout(resolve, 100, 'promise1'));
const promise2 = new Promise(resolve => setTimeout(resolve, 50, 'promise2'));

Promise.race([promise1, promise2])
    .then(value => console.log(value)) // 输出 promise2
    .catch(error => console.error(error));

const promise3 = new Promise((resolve, reject) => setTimeout(reject, 20, 'error3'));
const promise4 = new Promise(resolve => setTimeout(resolve, 50, 'promise4'));

Promise.race([promise3, promise4])
    .then(value => console.log(value))
    .catch(error => console.error(error)); // 输出 error3

Promise.allSettled() 的详细解读

Promise.allSettled() 的核心在于**“收集所有结果”**，无论成功或失败。它接收一个 Promise 数组，返回一个新的 Promise，当所有 Promise 都 settled (fulfilled 或 rejected) 后，返回的 Promise 也会 settled。返回值是一个数组，包含每个 Promise 的状态 (status: "fulfilled" 或 "rejected") 和值 (如果 fulfilled) 或原因 (如果 rejected)。

例子：

// www.javascriptcn.com code example
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('error2');
const promise3 = new Promise(resolve => setTimeout(resolve, 100, 3));

Promise.allSettled([promise1, promise2, promise3])
    .then(results => console.log(results));
    // 输出:
    // [
    //  {status: 'fulfilled', value: 1},
    //  {status: 'rejected', reason: 'error2'},
    //  {status: 'fulfilled', value: 3}
    // ]

Promise.any() 的详细解读

Promise.any() 的核心在于**“只要有一个成功就好”**。 它接收一个 Promise 数组，返回一个新的 Promise，一旦数组中任何一个 Promise 成功 (fulfilled)，则返回的 Promise 也会成功，并携带第一个成功 Promise 的值。如果数组中所有 Promise 都失败 (rejected)，则返回的 Promise 失败，并携带一个 AggregateError 错误对象，该对象包含所有 rejected 的原因。

例子：

// www.javascriptcn.com code example
const promise1 = Promise.reject('error1');
const promise2 = Promise.resolve('value2');
const promise3 = Promise.reject('error3');

Promise.any([promise1, promise2, promise3])
  .then(value => console.log(value)) // 输出 value2
  .catch(error => console.error(error));


const promise4 = Promise.reject('error4');
const promise5 = Promise.reject('error5');

Promise.any([promise4, promise5])
    .then(value => console.log(value))
    .catch(error => console.log(error)); // 输出 AggregateError: All promises were rejected