随着 JavaScript 的发展，我们在开发中使用的特性也越来越多。其中，Promise 和 Async/Await 是 JavaScript 中很常用的特性。在使用 Async/Await 时，我们经常会遇到多个 await 串联的问题，本文将介绍如何解决这一问题。
多个 await 串联问题的产生
在开发中，我们经常需要多个异步操作串联起来执行，例如以下场景：
----- -------- ----- - ----- - - ----- ------------- ----- - - ----- ------------- ----- - - ----- ------------- ------ --- -- --- -
在上述代码中，fetchDataA、fetchDataB、fetchDataC 都是异步函数，每个函数返回一个 Promise，我们使用 await 来等待 Promise 的结果，并将其赋值给变量。通过这种方式，我们可以实现多个异步操作顺序执行，确保操作的正确性。
但是，这种方式会导致每个请求必须等待前一个请求完成之后才能进行。因此，这种实现方式的效率可能较低。例如，在上述代码中，由于每个请求都必须等待前一个请求的结果才能开始执行，整个过程的执行时间是三个请求的时间之和。
解决多个 await 串联问题
为了解决上述问题，我们可以使用 Promise.all() 方法，该方法可以将多个 Promise 对象合并为一个 Promise 对象，并同时等待所有 Promise 对象执行完成。
例如，在上述场景中，我们可以将代码改为以下形式：
----- -------- ----- - ----- --- -- -- - ----- -------------------------- ------------- --------------- ------ --- -- --- -
在上述代码中，我们使用 Promise.all() 方法将 fetchDataA、fetchDataB、fetchDataC 三个异步操作合并为一个 Promise 对象，并使用 await 等待执行结果。与原来的代码相比，新增加的代码只是一个 Promise.all() 方法，但是这种改变可以极大地提高代码性能。
示例代码
下面是一个完整的示例代码，用于演示上述方法的实现：
----- -------- ------------ -
------ --- --------------- -- -
------------- -- -
------------- ----
-- ------
---
-
----- -------- ------------ -
------ --- --------------- -- -
------------- -- -
------------- ----
-- ------
---
-
----- -------- ------------ -
------ --- --------------- -- -
------------- -- -
------------- ----
-- ------
---
-
----- -------- ----- -
----- --- -- -- - ----- -------------------------- ------------- ---------------
-------------- -- ---
-
------在上述代码中，我们定义了三个异步函数：fetchDataA、fetchDataB、fetchDataC。它们都会在 1s、2s、3s 后返回一个数据。我们使用 Promise.all() 方法将这三个异步操作合并为一个 Promise 对象，并使用 await 等待其执行结果。最后，我们打印出三个异步操作的执行结果，证明它们已经按照同时执行的方式完成了。
总结
在实际开发中，我们经常会遇到多个异步操作的执行问题。本文介绍了使用 Promise.all() 方法来解决 ECMAScript 2016 (ES7) 多个 await 串联的问题，并提供了代码示例。希望本文能对你在实际开发中遇到的类似问题有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d10f27d4982a6ebe8ad57