ECMAScript 2018 中的 Promise.all() 与 Promise.race() 方法的使用讲解

Promise 是 JavaScript 中用于异步编程的一种解决方案，它可以避免回调地狱、提高代码可读性和可维护性。在 ECMAScript 2018 中，Promise 类型新增了两个方法：Promise.all() 和 Promise.race()，它们可以更加方便地处理多个异步操作。

Promise.all()

Promise.all() 方法接收一个 Promise 数组，当所有 Promise 都成功时，返回一个包含所有 Promise 结果的数组，否则返回第一个失败的 Promise 结果。

语法

Promise.all(iterable);

参数

• iterable：一个可迭代对象，通常是一个数组，其中每个元素都是一个 Promise。

返回值

返回一个 Promise，当所有 Promise 都成功时，返回一个包含所有 Promise 结果的数组，否则返回第一个失败的 Promise 结果。

使用示例

const p1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'foo'));
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, 'bar'));
const p3 = new Promise((resolve, reject) => setTimeout(resolve, 3000, 'baz'));

Promise.all([p1, p2, p3])
  .then(([result1, result2, result3]) => console.log(result1, result2, result3))
  .catch(error => console.log(error));

上面的代码中，我们创建了三个 Promise，分别在 1 秒、2 秒和 3 秒后返回不同的结果。使用 Promise.all() 方法，当所有 Promise 都成功时，我们会得到一个包含所有结果的数组，即 ['foo', 'bar', 'baz']，否则会返回第一个失败的 Promise 结果。

Promise.race()

Promise.race() 方法接收一个 Promise 数组，当其中任何一个 Promise 成功或失败时，返回该 Promise 的结果。

语法

Promise.race(iterable);

参数

• iterable：一个可迭代对象，通常是一个数组，其中每个元素都是一个 Promise。

返回值

返回一个 Promise，当其中任何一个 Promise 成功或失败时，返回该 Promise 的结果。

使用示例

const p1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'foo'));
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, 'bar'));
const p3 = new Promise((resolve, reject) => setTimeout(resolve, 3000, 'baz'));

Promise.race([p1, p2, p3])
  .then(result => console.log(result))
  .catch(error => console.log(error));

上面的代码中，我们创建了三个 Promise，分别在 1 秒、2 秒和 3 秒后返回不同的结果。使用 Promise.race() 方法，当其中任何一个 Promise 成功或失败时，我们会得到该 Promise 的结果。

总结

Promise.all() 和 Promise.race() 方法是 ECMAScript 2018 新增的两个方法，它们可以更加方便地处理多个异步操作。使用 Promise.all() 方法，我们可以等待多个 Promise 全部完成，然后得到它们的结果；使用 Promise.race() 方法，我们可以等待多个 Promise 中任何一个完成，然后得到该 Promise 的结果。在实际开发中，我们可以根据具体需求选择使用哪种方法，以提高代码效率和可读性。

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