前言
在前端开发中，异步编程是常见的一种编程方式。而 Promise 是 ES6 中添加的一种异步编程的 API，可以以一种更加优美的方式解决异步回调地狱的问题。其中，Promise.race() 和 Promise.all() 是比较常见的两个方法。本文将着重介绍这两个方法的区别及使用场景。
Promise.race()
Promise.race() 方法返回一个 Promise，在一组 Promise 中，只要有一个 Promise 状态改变，该方法就会返回该 Promise 的结果。该方法的使用场景可以是在多个请求中，只要有一个请求响应便进行业务逻辑处理。
下面是 Promise.race() 方法的基本语法：
Promise.race(iterable);
iterable是一个可迭代对象，如数组或类数组对象。
下面是 Promise.race() 方法的示例代码：
-- -------------------- ---- -------
----- -- - --- --------------- -- -
------------- -- -
---------------- ----
-- ------
---
----- -- - --- --------------- -- -
------------- -- -
---------------- ----
-- ------
---
----------------- ---------------- -- -
-------------------- -- --- -------- --
--Promise.all()
Promise.all() 方法返回一个 Promise，其状态是由一组 Promise 状态决定的。只有所有的 Promise 都为 resolve 状态，该方法才会返回 resolve 状态并返回一个包含所有 resolve 结果的数组。否则，只要有一个 Promise 为 reject 状态，该方法就会返回 reject 状态，并返回该 Promise 的结果。该方法的使用场景可以是在多个请求全部响应后，进行业务逻辑处理。
下面是 Promise.all() 方法的基本语法：
Promise.all(iterable);
iterable是一个可迭代对象，如数组或类数组对象。
下面是 Promise.all() 方法的示例代码：
-- -------------------- ---- -------
----- -- - --- --------------- -- -
------------- -- -
---------------- ----
-- ------
---
----- -- - --- --------------- -- -
------------- -- -
---------------- ----
-- ------
---
---------------- ----------------- -- -
--------------------- -- --- --------- --- -------- ---
--区别及使用场景
可以明显地发现，Promise.race() 和 Promise.all() 方法的区别在于，前者只要有一个 Promise 状态发生变化，即返回结果，而后者必须所有 Promise 都状态改变才会返回结果。因此，二者的使用场景也不同。
- Promise.race() 的使用场景
在多个请求中，只要有一个请求响应便进行业务逻辑处理。比如我们向不同的服务器发送请求，只要有一个服务器返回响应，我们就可以根据响应进行相应的业务操作。
- Promise.all() 的使用场景
在多个请求全部响应后，进行业务逻辑处理。比如我们向不同的服务器发送请求，只有当所有服务器都返回响应后，我们才可以根据响应进行相应的业务操作。
总结
在异步编程的过程中，Promise 是一种优美的解决方案。而 Promise.race() 和 Promise.all() 则是 Promise 中非常重要的两个方法，对于前端开发人员来说，熟练掌握二者的使用场景和区别，可以更加高效地进行异步编程任务。
参考
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ee04a9f6b2d6eab382670d