前言
在前端开发中，异步编程是必不可少的。而 Promise 是 ES6 中新增的异步编程解决方案，它可以解决回调地狱的问题，使代码更加简洁可读。其中，Promise.all() 和 Promise.race() 是 Promise 中常用的两个方法，本文将介绍它们的使用方法和实战案例。
Promise.all()
Promise.all() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise 实例。该方法会等待所有的 Promise 实例都完成后再返回结果，如果其中有一个 Promise 实例失败，则整个 Promise.all() 实例失败，返回失败的结果。
下面是一个使用 Promise.all() 的实战案例，假设我们需要从三个接口中获取数据，然后将数据进行合并。
-- -------------------- ---- -------
----- -------- - ----------------
----- -------- - ----------------
----- -------- - ----------------
---------------------- --------- ----------
--------------- -- -
------ ---------------------------------- -- ------------------
--
---------- -- -
----- ------ - ------------------ -------- -- -
------ --------- ------------
-- ----
--------------------
--
------------ -- -
---------------------
---上面的代码中，我们首先使用 fetch 方法获取三个接口的数据，并将它们作为 Promise 实例传递给 Promise.all() 方法。然后，我们在 Promise.all() 的回调函数中使用 Promise.all() 方法再次将所有 Promise 实例的结果转换为 JSON 格式。最后，我们将所有数据合并成一个数组并输出结果。
Promise.race()
Promise.race() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise 实例。该方法会等待数组中的任意一个 Promise 实例完成后返回结果，无论是成功还是失败。
下面是一个使用 Promise.race() 的实战案例，假设我们需要从两个接口中获取数据，但是其中一个接口的响应速度比较慢，我们希望尽快获取到数据。
-- -------------------- ---- -------
----- -------- - ----------------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------- ------------------
-- ------
---
----------------------- ----------
-------------- -- -
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
---------------------
---上面的代码中，我们使用 fetch 方法获取一个接口的数据，并将它作为 Promise 实例传递给 Promise.race() 方法。同时，我们使用一个定时器模拟另一个接口的响应速度比较慢，如果在 5 秒内该接口没有响应，则返回一个错误。最后，我们在 Promise.race() 的回调函数中将结果转换为 JSON 格式并输出结果。
总结
Promise.all() 和 Promise.race() 是 Promise 中常用的两个方法，它们可以帮助我们更好地处理异步编程。在实际开发中，我们可以根据具体的需求选择使用哪一个方法，从而使代码更加简洁可读。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6614956fd10417a2224cf9fb