在 ES8 中使用 await 方式实现多种 Promise 并发执行
随着 JavaScript 语言的发展，Promise 已经成为了现代 JavaScript 中进行异步编程的重要工具。ES8 引入了 async/await，使得使用 Promise 编写异步代码变得更加简单和优雅。async/await 是对 Promise 的一种语法糖，它允许我们在代码中使用同步的方式来处理异步操作，使得我们的代码更加易读和易维护。
在本文中，我们将讨论如何使用 async/await 来实现多种 Promise 的并发执行，让我们开始吧。
Promise 并发执行的问题
在实际开发中，经常会遇到并发执行多个 Promise 的情况，例如在处理网络请求时，我们可能需要同时向多个不同的服务端发送请求，然后在所有请求完成后统一处理返回结果。这个过程中，我们需要等待所有的 Promise 都完成才能进行下一步操作。
传统的 Promise 处理方式就是使用 Promise.all 方法，它接收一个 Promise 数组，并返回一个新的 Promise 对象，该 Promise 对象会在数组中所有的 Promise 都成功的情况下解决为一个成功值的数组；如果任意一个 Promise 失败，则该 Promise 对象会直接被拒绝，并返回失败的 Promise 对象。
示例代码如下：
---------------------- --------- ----------
------------- -- -
---------------------
--
------------ -- -
---------------------
---但是，使用 Promise.all 有一个问题，就是如果其中一个 Promise 失败，整个 Promise.all 就会失败，导致其他 Promise 的结果无法被处理。为了解决这个问题，我们需要用到 Promise.race 方法。
Promise.race 方法也接收一个 Promise 数组，并返回一个新的 Promise 对象。不同的是，该 Promise 对象会在数组中任意一个 Promise 被解决的情况下，立即解决为该 Promise 的解决值；如果任意一个 Promise 被拒绝，则该 Promise 对象会直接被拒绝，并返回第一个被拒绝的 Promise 对象。
示例代码如下：
----------------------- --------- ----------
------------ -- -
--------------------
--
------------ -- -
---------------------
---通过使用 Promise.race，我们可以有效地解决 Promise 并发处理过程中其它 Promise 自动取消的问题，但如果需要处理所有 Promise 的结果时，Promise.race 就无法满足要求了。
在 ES8 中使用 await 实现 Promise 并发执行
在 ES8 中，使用 async/await 可以让我们更加优雅地处理多个 Promise 并发执行的情况。我们只需要使用 async 关键字将函数标记为异步函数，然后使用 await 关键字来等待单个 Promise 的完成。
代码示例：
----- -------- ----------- - ----- ----- - ----- --------- ----- ----- - ----- --------- ----- ----- - ----- --------- ------ ------- ------ ------- -
上述代码中，我们使用了 async/await 来等待三个 Promise 的完成并将它们的结果存储在变量中。需要注意的是，使用 await 关键字的代码必须在 async 函数内部执行。
在上述代码中，由于每个 Promise 之间都使用了 await 关键字，所以它们将依次执行，并且每个 Promise 的结果都将被存储在一个数组中。这样，我们就可以轻松地处理多个 Promise 并发执行的情况。
除此之外，我们还可以使用 Promise.all 方法来同时等待多个 Promise 的完成，并在它们全部完成后，一次性处理所有的结果。
代码示例：
----- -------- ----------- - ----- ------- ------ ------ - ----- ---------------------- --------- ----------- ------ ------- ------ ------- -
在上述代码中，我们使用了 Promise.all 方法同时等待三个 Promise 的完成，并将它们的结果解构为一个数组。这种方式不仅可以减少使用 await 的次数，还可以提高代码的可读性。
如果你需要在获取到某个 Promise 的数据后，立即对其进行处理的话，也可以使用 Promise.then 方法。
代码示例：
----- -------- ----------- -
---------------------- --------- ----------
------------- -- -
-- ----
--
------------ -- -
-- ----
---
-总结
在 ES8 中使用 await 方式可以更加优雅地处理多个 Promise 并发执行的情况。我们可以使用 async/await 来等待单个 Promise 的完成，也可以使用 Promise.all 方法等待多个 Promise 的完成，并在它们全部完成后，一次性处理所有的结果。同时，我们还可以使用 Promise.race 方法来实现部分 Promise 的取消，并在需要处理所有 Promise 返回值的情况下，使用 Promise.all 来获取所有 Promise 的数据结果，这样可以极大地方便前端开发者快速高效地处理并发请求相关的场景。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6479d0dc968c7c53b05c2664