详解 Promise 中的 all 和 race 方法

在前端开发中，异步编程是非常常见的问题。为了解决异步编程所带来的一系列麻烦，JavaScript 在 ES6 中引入了 Promise 对象，通过 Promise 可以方便的处理异步编程问题，使代码更加简洁和易读。在 Promise 对象中，常常需要使用 all 和 race 方法，本文将对这两个方法进行详细的介绍和解释。

Promise.all 方法

Promise.all 方法接收一个 Promise 对象的数组作为参数，返回一个 Promise 实例，当数组中所有的 Promise 对象都 resolve 后，返回的 Promise 实例将 resolve，并返回一个由所有 Promise 返回值组成的数组。当有一个 Promise reject 时，立即返回 reject 的 Promise 对象。

使用场景：

• 并行执行多个异步任务。
• 对一组异步任务执行完后统一处理结果。

示例代码：

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.resolve(3)

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

Promise.all 方法可以接收非 Promise 类型的值，会默认转化为 Promise 类型处理，如下：

const p1 = Promise.resolve(1)
const p2 = 2
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3)
  }, 100)
})

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

Promise.race 方法

Promise.race 方法同样接收一个 Promise 对象的数组作为参数，返回一个 Promise 实例。它的作用是一旦数组中的 Promise 对象有一个状态改变，则返回的 Promise 实例的状态就跟着变化。一旦有 Promise 对象 resolve 或 reject，返回的 Promise 就立即 resolve 或 reject 。

使用场景：

• 需要优先处理异步任务返回的结果，而不需要等待其他任务。

示例代码：

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p1')
  }, 1000)
})

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

Promise.race([p1, p2]).then((result) => {
  console.log(result) // p1
}).catch((error) => {
  console.error(error) // p2
})

总结

本文详细介绍了 Promise.all 和 Promise.race 两个 Promise 方法，希望读者通过本文了解这两个方法的用法和注意事项。在使用 Promise 进行异步编程时，应该灵活运用这两个方法并结合具体业务场景去使用。

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