Promise.all() 与 Promise.race() 的区别及使用方法详解

在前端开发中，异步编程是一项重要的技能。为了解决回调地狱的问题，ES6 引入了 Promise 对象，它是一种更加优雅的处理异步操作的方式。Promise.all() 和 Promise.race() 是 Promise 对象中的两个重要方法，本文将着重介绍它们的区别以及使用方法。

Promise.all()

Promise.all() 方法接收一个 Promise 对象数组作为参数，返回一个 Promise 实例。这个 Promise 实例会在所有的 Promise 对象都成功解决后才会被解决，返回值是一个数组，包含了所有 Promise 对象的解决结果。如果其中有任何一个 Promise 对象被拒绝，那么 Promise.all() 方法返回的 Promise 对象就会被拒绝，返回值是第一个被拒绝的 Promise 对象的拒绝原因。

例如，我们有以下三个 Promise 对象：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

我们可以使用 Promise.all() 方法来等待它们都解决后再执行下一步操作：

Promise.all([promise1, promise2, promise3])
  .then(([result1, result2, result3]) => {
    console.log(result1, result2, result3); // 1, 2, 3
  })
  .catch((error) => {
    console.error(error);
  });

如果其中有任何一个 Promise 对象被拒绝，那么 Promise.all() 方法返回的 Promise 对象就会被拒绝：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('promise2 rejected'));
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(([result1, result2, result3]) => {
    console.log(result1, result2, result3);
  })
  .catch((error) => {
    console.error(error); // Error: promise2 rejected
  });

Promise.race()

Promise.race() 方法同样接收一个 Promise 对象数组作为参数，返回一个 Promise 实例。这个 Promise 实例会在第一个 Promise 对象解决或拒绝后就立即被解决或拒绝，返回值是第一个解决或拒绝的 Promise 对象的解决结果或拒绝原因。

例如，我们有以下两个 Promise 对象：

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

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('promise2 rejected'));
  }, 500);
});

我们可以使用 Promise.race() 方法来等待它们中的任何一个解决或拒绝后再执行下一步操作：

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // promise2 resolved
  })
  .catch((error) => {
    console.error(error); // Error: promise2 rejected
  });

由于 promise2 的超时时间比 promise1 短，因此 promise2 先被解决或拒绝，Promise.race() 方法返回的 Promise 对象就会被解决或拒绝。

总结

Promise.all() 和 Promise.race() 都是 Promise 对象的重要方法，它们可以帮助我们更加优雅地处理异步操作。Promise.all() 等待所有的 Promise 对象都解决后才会被解决，Promise.race() 则等待其中任何一个 Promise 对象解决或拒绝后就立即被解决或拒绝。在实际开发中，我们可以根据具体的需求选择合适的方法来处理异步操作。

参考代码

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(([result1, result2, result3]) => {
    console.log(result1, result2, result3); // 1, 2, 3
  })
  .catch((error) => {
    console.error(error);
  });

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('promise2 rejected'));
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(([result1, result2, result3]) => {
    console.log(result1, result2, result3);
  })
  .catch((error) => {
    console.error(error); // Error: promise2 rejected
  });

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

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('promise2 rejected'));
  }, 500);
});

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // promise2 resolved
  })
  .catch((error) => {
    console.error(error); // Error: promise2 rejected
  });

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