Promise 中如何处理多个 Promise 并发执行

在前端开发中，经常需要处理多个异步任务，这时我们可以使用 Promise 来管理这些异步任务。Promise 是 JavaScript 中一种处理异步操作的方法，它可以使异步代码看起来像同步代码。但当我们需要同时执行多个异步任务时，就需要考虑如何合并这些异步操作的返回结果。

本文将介绍如何使用 Promise 处理多个 Promise 并发执行，包括如何使用 Promise.all() 方法和 Promise.race() 方法来处理多个 Promise 的返回结果。

Promise.all() 方法

Promise.all() 方法可以接受一个 Promise 数组作为参数，只有当所有 Promise 都成功时才会返回一个成功的回调，否则将返回一个失败的回调。

const p1 = new Promise(resolve => setTimeout(resolve, 1000, 'p1'))
const p2 = new Promise(resolve => setTimeout(resolve, 2000, 'p2'))
const p3 = new Promise(resolve => setTimeout(resolve, 3000, 'p3'))

Promise.all([p1, p2, p3])
  .then(results => console.log(results))
  .catch(error => console.log(error))

上述代码中，我们同时创建了三个 Promise 对象，分别在 1 秒，2 秒和 3 秒后返回一个字符串。“Promise.all()” 的作用是将这三个 Promise 对象合并，只有当所有 Promise 都返回结果后才会执行 then 方法输出结果数组 ["p1", "p2", "p3"]。若其中一个 Promise 返回失败，则 catch 方法将返回失败信息。

需要注意的是，Promise.all() 方法的执行顺序是并发执行的，在性能上更加优越。

Promise.race() 方法

Promise.race() 方法同样接受一个 Promise 数组作为参数，但不同于 Promise.all() 的是，只要其中一个 Promise 返回了结果或者出现了错误，就会返回一个结果或失败信息。

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

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

上述代码中，我们同样创建了三个 Promise 对象，分别在 1 秒，2 秒和 3 秒后返回一个字符串。Promise.race() 方法的作用是，只要其中一个 Promise 对象返回了结果或出错，就执行 then 方法输出该结果或失败信息“p2 reject”。

需要注意的是，Promise.race() 方法的执行顺序是随机的，不一定是谁先谁后的。

总结

Promise 是一种处理异步操作的方法，在处理多个异步任务时可以使用 Promise.all() 方法或 Promise.race() 方法来处理多个 Promise 的返回结果。

Promise.all() 方法是当所有 Promise 对象都成功时，才会执行成功回调；若其中一个 Promise 返回失败，则会执行失败回调。

Promise.race() 方法是只要其中一个 Promise 对象返回了结果或出现错误就会执行成功回调或失败回调。

使用 Promise 并发处理多个异步任务可以提高程序执行效率，同时减少开发维护成本。

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