Promise.all 和 Promise.race 的区别及使用场景-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们经常需要处理异步操作，而在 ES6 中，我们可以使用 Promise 来解决异步问题。在 Promise 中，有两个常用的方法分别是 Promise.all 和 Promise.race。

Promise.all

Promise.all 方法接收一个数组参数，参数中包含多个 Promise 对象。当所有 Promise 都成功执行时，Promise.all 返回一个新的 Promise 对象，该对象的状态为 resolved，并且返回的结果是一个数组，包含每个 Promise 成功返回的值。如果任意一个 Promise 失败，Promise.all 的返回值为失败的 Promise 对象。

-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - --- --------------- -- ------------------- ---- ----------
----- -------- - ------------------------

---------------------- --------- ----------
  ------------ -- -
    --------------------
  --
  ------------ -- -
    ---------------------
  ---
-- ------- -----

在上面的示例中，Promise.all 接收三个 Promise 对象，promise1 和 promise2 都成功了，promise3 失败了，因此 Promise.all 返回的 Promise 对象也失败了，最终输出失败信息 Oops!。

Promise.race

Promise.race 方法接收一个数组参数，参数中包含多个 Promise 对象。返回一个新的 Promise 对象，该对象的状态为数组中最先执行完成的 Promise 对象的状态，无论该 Promise 成功还是失败。如果最先执行完成的 Promise 成功，Promise.race 返回的 Promise 也成功，并且返回的值为该 Promise 成功返回的值；如果最先执行完成的 Promise 失败，Promise.race 返回的 Promise 也失败，并且返回失败信息。

-- -------------------- ---- -------
----- -------- - --- --------------- -- ------------------- ----- ----------
----- -------- - --- --------------- -- ------------------- ---- -----------------

----------------------- ----------
  ----------- -- -
    -------------------
  --
  ------------ -- -
    ---------------------
  ---
-- ------- ------------

在上面的示例中，Promise.race 接收两个 Promise 对象，因为 promise2 执行时间更短，因此 Promise.race 返回的 Promise 对象的状态和返回值都和 promise2 一样，成功了，并输出 Promise.race。

Promise.all 和 Promise.race 的区别

Promise.all 和 Promise.race 都可以用来处理多个 Promise 的状态，但两者有以下区别：

Promise.all 所有 Promise 都成功执行才返回成功的 Promise，任意一个 Promise 失败都将返回失败的 Promise；Promise.race 只要有一个 Promise 执行完成就返回一个新的 Promise，无论该 Promise 成功还是失败。
Promise.all 返回的 Promise 对象成功返回的值是一个数组，包含每个 Promise 成功返回的值；Promise.race 返回的 Promise 对象成功返回的值是最先执行完成的 Promise 成功返回的值。

使用场景

Promise.all 和 Promise.race 的使用场景如下：

如果需要所有异步操作都完成之后再进行其他操作，可以使用 Promise.all。比如需要同时请求多个接口获取数据时，我们可以将每个请求都封装到 Promise 中，然后使用 Promise.all 来等待所有请求完成，然后统一处理返回的数据。

-- -------------------- ---- -------
----- ----- - -----------------

----- ---- - --- ----- --- ----

----- -------- - ------------ -- ----------------

---------------------
  ------------- -- -
    -- ------- --
  --
  ------------ -- -
    -- ------ --
  ---

如果需要只要有一个异步操作完成就进行其他操作，可以使用 Promise.race。比如需要同时请求多个接口获取数据时，但只需要第一个请求返回的数据，我们可以使用 Promise.race 来等待第一个请求完成，然后只处理第一个请求的返回数据。

-- -------------------- ---- -------
----- ----- - -----------------

----- ---- - --- ----- --- ----

----- -------- - ------------ -- ----------------

----------------------
  ------------ -- -
    -- ------- --
  --
  ------------ -- -
    -- ------ --
  ---

总结

在处理多个异步操作时，我们可以使用 Promise.all 和 Promise.race 来控制异步流程，从而达到我们想要的效果。Promise.all 适用于所有异步操作都完成之后再处理数据的场景，Promise.race 适用于只需要一项异步操作完成之后即可处理数据的场景。在实际开发中，我们可以结合具体需要选择合适的 Promise 方法来达到更好的效果。

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