Promise 初学者进阶之 Promise.all/ Promise.race

前言

在前端开发中，异步操作是非常常见的，而 Promise 作为一种异步编程的解决方案，已经被广泛应用于现代 JavaScript 应用程序中。在之前的文章中，我们已经介绍了 Promise 的基本使用方法和原理，本文将进一步介绍 Promise 的两个重要方法：Promise.all 和 Promise.race。

Promise.all

Promise.all 方法接受一个 Promise 对象的数组作为参数，返回一个新的 Promise 对象。当数组中所有的 Promise 对象都成功时，返回的 Promise 对象才会成功，其结果是一个数组，包含了所有 Promise 对象的结果。当其中任何一个 Promise 对象失败时，返回的 Promise 对象会立即失败，其结果为第一个失败的 Promise 对象的结果。

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

// www.javascriptcn.com code example
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3);
  }, 1000);
});

Promise.all([p1, p2, p3]).then((values) => {
  console.log(values); // [1, 2, 3]
});

在上面的代码中，我们定义了三个 Promise 对象，分别返回了数字 1 和 2，以及在 1 秒钟后返回数字 3。我们将这三个 Promise 对象作为参数传递给 Promise.all 方法，并在其返回的 Promise 对象上使用 then 方法，以处理所有 Promise 对象的结果。

Promise.race

Promise.race 方法接受一个 Promise 对象的数组作为参数，返回一个新的 Promise 对象。当数组中任何一个 Promise 对象成功或失败时，返回的 Promise 对象就会立即成功或失败，其结果为第一个完成的 Promise 对象的结果。

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

// www.javascriptcn.com code example
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p1');
  }, 1000);
});

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

Promise.race([p1, p2]).then((value) => {
  console.log(value); // 'p2'
});

在上面的代码中，我们定义了两个 Promise 对象，分别在 1 秒钟后返回字符串 'p1' 和在 500 毫秒后返回字符串 'p2'。我们将这两个 Promise 对象作为参数传递给 Promise.race 方法，并在其返回的 Promise 对象上使用 then 方法，以处理第一个完成的 Promise 对象的结果。

总结

本文介绍了 Promise 的两个重要方法：Promise.all 和 Promise.race。Promise.all 方法用于在所有 Promise 对象都成功时，返回一个包含所有 Promise 对象结果的数组；而 Promise.race 方法则用于在任何一个 Promise 对象成功或失败时，返回第一个完成的 Promise 对象的结果。这两个方法在实际开发中都有很重要的应用场景，希望本文能够对初学者进一步深入理解 Promise 提供帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65dd44911886fbafa4aa23f9