在前端开发中，异步编程是非常常见的操作。为了更高效地处理一组异步调用，我们可以使用 Promise.all() 和 Promise.race() 这两个方法。本文将介绍如何使用这两个方法来处理一组异步调用。
Promise.all()
Promise.all() 方法可以接收一个 Promise 数组，返回一个新的 Promise 对象。当所有的 Promise 对象都成功执行时，Promise.all() 返回的 Promise 对象才会成功。如果其中一个 Promise 对象失败了，Promise.all() 返回的 Promise 对象就会失败。
下面是 Promise.all() 的语法：
Promise.all(iterable);
其中，iterable 可以是一个数组或者一个可迭代对象，如 Set 或 Map。
接下来，我们来看一个使用 Promise.all() 的例子。假设我们需要同时获取两个不同接口的数据，并在两个接口都返回数据后进行一些操作。我们可以使用 Promise.all() 来实现：
-- -------------------- ---- -------
----- ---- - -------------------------
----- ---- - -------------------------
------------------ ------
------------- ------ -- -
-- -------
--
------------ -- -
-- ----
---在上面的例子中，我们通过 fetch() 方法获取了两个接口的数据，并将它们分别存储在 api1 和 api2 变量中。然后，我们将这两个 Promise 对象作为参数传递给 Promise.all() 方法。在 Promise.all() 返回的 Promise 对象成功时，我们可以通过解构赋值的方式获取到 api1 和 api2 返回的数据，并进行一些操作。如果其中一个 Promise 对象失败了，我们可以通过 catch() 方法来处理错误。
Promise.race()
Promise.race() 方法也可以接收一个 Promise 数组，返回一个新的 Promise 对象。与 Promise.all() 不同的是，Promise.race() 返回的 Promise 对象会在数组中的第一个 Promise 对象成功或失败后立即返回。
下面是 Promise.race() 的语法：
Promise.race(iterable);
接下来，我们来看一个使用 Promise.race() 的例子。假设我们需要获取两个接口的数据，但是其中一个接口的响应速度比另一个慢很多。为了提高用户体验，我们希望在第一个接口返回数据后就立即显示它，而不必等待第二个接口返回数据。我们可以使用 Promise.race() 来实现：
-- -------------------- ---- -------
----- ---- - -------------------------
----- ---- - -------------------------
------------------- ------
--------- -- -
-- -------
--
------------ -- -
-- ----
---在上面的例子中，我们同样使用 fetch() 方法获取了两个接口的数据，并将它们分别存储在 api1 和 api2 变量中。然后，我们将这两个 Promise 对象作为参数传递给 Promise.race() 方法。在 Promise.race() 返回的 Promise 对象成功时，我们可以获取到第一个返回的 Promise 对象的数据，并进行一些操作。如果其中一个 Promise 对象失败了，我们可以通过 catch() 方法来处理错误。
总结
使用 Promise.all() 和 Promise.race() 可以帮助我们更高效地处理一组异步调用。在使用 Promise.all() 时，我们可以等待所有的 Promise 对象都成功执行后再进行操作。而在使用 Promise.race() 时，我们可以在第一个 Promise 对象成功或失败后立即返回。这两个方法都可以帮助我们提高代码的效率和用户体验。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f253612b3ccec22faed336