Promise.all(), Promise.race(), Promise.allSettled() 之间的区别

在前端开发中，我们经常会用到 Promise 对象来处理异步操作。而在 Promise 的使用中，有三个方法是比较常见且常用的，它们分别是 Promise.all()、Promise.race() 和 Promise.allSettled()。这三个方法虽然都是 Promise 对象的方法，但是它们之间却有很大的区别。本文将详细介绍这三个方法之间的区别，并提供示例代码，帮助读者更好的理解它们的用法和作用。

Promise.all()

Promise.all() 方法接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象在数组中所有的 Promise 对象都成功（即状态为 resolved）时才会被 resolved，其中的一个 Promise 对象失败（即状态为 rejected）时则会被 rejected。

下面是一个使用 Promise.all() 方法的示例代码：

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

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

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3');
  }, 3000);
});

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

在上面的代码中，我们定义了三个 Promise 对象，分别在 1 秒、2 秒和 3 秒后才会被 resolved。我们将这三个 Promise 对象放在一个数组中传给了 Promise.all() 方法。当三个 Promise 对象都成功后，Promise.all() 方法返回的新 Promise 对象才会被 resolved，并把三个 Promise 对象的结果作为一个数组传给了 then() 方法。

Promise.race()

Promise.race() 方法接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象在数组中任意一个 Promise 对象状态改变时（即 resolved 或 rejected）就会跟着改变。而且它只会返回第一个改变状态的 Promise 对象的结果。

下面是一个使用 Promise.race() 方法的示例代码：

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

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

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3');
  }, 3000);
});

Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log(value);
}).catch((error) => {
  console.log(error);
});

在上面的代码中，我们同样定义了三个 Promise 对象，分别在 1 秒、2 秒和 3 秒后才会被 resolved。我们将这三个 Promise 对象放在一个数组中传给了 Promise.race() 方法。当任意一个 Promise 对象的状态改变时，Promise.race() 方法返回的新 Promise 对象就会跟着改变，并把第一个状态改变的 Promise 对象的结果传给了 then() 方法。

Promise.allSettled()

Promise.allSettled() 方法接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象在数组中所有的 Promise 对象都结束（即 resolved 或 rejected）后才会被 resolved，并把每个 Promise 对象的结果作为一个对象传给了 then() 方法。

下面是一个使用 Promise.allSettled() 方法的示例代码：

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

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

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3');
  }, 3000);
});

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
  console.log(results);
});

在上面的代码中，我们同样定义了三个 Promise 对象，分别在 1 秒、2 秒和 3 秒后才会被 resolved 或 rejected。我们将这三个 Promise 对象放在一个数组中传给了 Promise.allSettled() 方法。当三个 Promise 对象都结束后，Promise.allSettled() 方法返回的新 Promise 对象才会被 resolved，并把每个 Promise 对象的结果作为一个对象传给了 then() 方法。

总结

Promise.all()、Promise.race() 和 Promise.allSettled() 都是 Promise 对象的方法，它们的作用和用法有很大的区别：

• Promise.all() 用于将多个 Promise 对象合并成一个新的 Promise 对象，并在所有的 Promise 对象都成功时返回结果；

• Promise.race() 用于将多个 Promise 对象合并成一个新的 Promise 对象，并在任意一个 Promise 对象状态改变时返回结果；

• Promise.allSettled() 用于将多个 Promise 对象合并成一个新的 Promise 对象，并在所有的 Promise 对象都结束时返回结果。

通过理解这三个方法之间的区别，我们可以更好地利用 Promise 对象来处理异步操作，提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658ea0a4eb4cecbf2d47cf3d