深入了解 JavaScript 中的 Promise 相关方法：all、race 和 allSettled

在 JavaScript 开发中，处理异步操作是很常见的需求。随着 ECMAScript 6（ES6）的引入，Promise 成为了处理异步操作的主要方式之一。而在 Promise 的方法中，Promise.all()、Promise.race() 和 Promise.allSettled() 是一些非常有用的工具，它们在处理异步操作时有各自的特点和用途。本文将介绍这三个方法的用法、示例以及区别，帮助读者更好地理解和应用它们。

Promise.all()

Promise.all() 方法接收一个 Promise 实例数组作为参数，并返回一个新的 Promise 实例。这个新的 Promise 实例会在传入的所有 Promise 实例都已经成功完成（resolved）时才会被解决（resolve），如果其中有任何一个 Promise 实例被拒绝（rejected），它就会立即将该拒绝的值传递给它的回调函数，并且 Promise.all() 返回的 Promise 实例也会被拒绝。

使用示例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 已完成');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 已完成');
  }, 2000);
});

Promise.all([promise1, promise2])
  .then(values => {
    console.log(values);
    // 输出：['Promise 1 已完成', 'Promise 2 已完成']
  })
  .catch(error => {
    console.error(error);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Promise.race()

Promise.race() 方法接收一个 Promise 实例数组作为参数，返回一个新的 Promise 实例。这个新的 Promise 实例会在传入的 Promise 实例中有一个率先解决（resolve）或拒绝（reject）时解决或拒绝，并且它的状态和值会与率先解决或拒绝的 Promise 相同。通常用于设置超时操作，或者在多个请求中只需要获取其中一个结果的情况下。

使用示例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 已完成');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 已完成');
  }, 1000);
});

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value);
    // 输出：'Promise 2 已完成'，因为 promise2 较快完成
  })
  .catch(error => {
    console.error(error);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Promise.allSettled()

Promise.allSettled() 方法接收一个 Promise 实例数组作为参数，返回一个新的 Promise 实例。这个新的 Promise 实例会在传入的所有 Promise 实例都已经解决（无论是成功还是失败）后解决，并返回一个包含所有 Promise 结果的数组。不同于 Promise.all()，它不会在有 Promise 被拒绝时立即拒绝整个 Promise 链，而是等待所有 Promise 结束后返回结果。

使用示例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 已完成');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 2 失败了');
  }, 1000);
});

Promise.allSettled([promise1, promise2])
  .then(results => {
    console.log(results);
    /* 输出：
    [
      { status: 'fulfilled', value: 'Promise 1 已完成' },
      { status: 'rejected', reason: 'Promise 2 失败了' }
    ]
    */
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

区别与总结

• Promise.all() 会在所有 Promise 实例成功完成时才成功，一旦有一个失败就会立即失败。
• Promise.race() 会在任何一个 Promise 实例率先成功或失败时返回结果。
• Promise.allSettled() 则会等待所有 Promise 实例结束后返回结果，无论是成功还是失败。

这三个方法各有特点，根据实际需求选择合适的方法来处理异步操作，可以提高代码的可读性和性能。