Promise 方法大横向比较：all、allSettled、any、race 齐聚一手！

前端

2023-12-15 01:08:51

前言

Promise 是 JavaScript 中处理异步操作的利器，它提供了四种基本方法：all、allSettled、any 和 race。这四种方法都是为了处理并行任务而设计的，但它们各有其独特的用法。

Promise 方法的相同点

在深入了解这四种方法的差异之前，我们先来看看它们有哪些共同点。

这四种方法都是异步的，这意味着它们不会阻塞主线程。
这四种方法都返回一个 Promise 对象，这个 Promise 对象表示所有并行任务完成后的最终结果。
这四种方法都可以接收一个数组作为参数，这个数组中包含要并行执行的任务。

Promise 方法的不同点

虽然这四种方法都有很多共同点，但它们也有着一些重要的区别。

all 方法： all 方法等待所有任务都完成，然后返回一个包含所有任务结果的数组。如果其中任何一个任务失败，all 方法也会失败。
allSettled 方法： allSettled 方法等待所有任务都完成，然后返回一个包含所有任务状态的数组。无论任务成功与否，allSettled 方法都不会失败。
any 方法： any 方法等待第一个任务完成，然后返回该任务的结果。如果所有任务都失败，any 方法也会失败。
race 方法： race 方法等待第一个任务完成，然后返回该任务的结果。无论其他任务是否完成，race 方法都不会失败。

手写示例

为了更好地理解这四种方法的用法，我们来看一个手写的例子。在这个例子中，我们使用这四种方法来处理一个并行任务数组。

const tasks = [
  fetch('https://example.com/data1.json'),
  fetch('https://example.com/data2.json'),
  fetch('https://example.com/data3.json')
];

// 使用 all 方法
Promise.all(tasks)
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error);
  });

// 使用 allSettled 方法
Promise.allSettled(tasks)
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error);
  });

// 使用 any 方法
Promise.any(tasks)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

// 使用 race 方法
Promise.race(tasks)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });