随着 JavaScript 越来越成为一种多用途的编程语言，它也被越来越多的开发者用于前端开发。 然而，随着 JavaScript 代码的日益复杂，异步编程的问题也变得越来越突出。 幸运的是，ES8 引入了一个新的关键字 await 来解决异步编程的问题。即使如此，多层嵌套可能会导致 await 关键字出现一些问题。 本文将探讨这些问题以及如何解决它们。
问题
假设您需要从数据库中获取一些数据，但这需要多次异步调用才能完成。 在这种情况下，您可能会编写嵌套的异步函数，如下所示：
----- -------- ------------- - ----- -------- - ----- ------------------ ----- --------------- - ----- ------------------------ ----- ------ - ----- -------------------------- ------ ------- -
上面的代码看起来很不错。 但是，假设 transformData 和 saveData 都需要异步调用，会发生什么呢？ 在这种情况下，我们将在所有嵌套的异步调用中使用 await，代码看起来像这样：
----- -------- ------------- - ----- -------- - ----- ------------------ ----- --------------- - ----- ------------------------ ----- ------ - ----- -------------------------- ------ ------- - ----- -------- ------------------- - ----- -------- - ----- -------------------- ----- --------------- - ----- --------------------------- ------ ---------------- - ----- -------- -------------- - ----- -------- - ----- ----------------------- ----- --------------- - ----- ------------------------------ ----- ------ - ----- -------------------------------- ------ ------- -
但是，如果有多个嵌套的异步调用，我们可能会遇到一些问题，如“Too many pending promises”或“maximum call stack size exceeded”等问题。这些错误通常表明我们的代码出现了大量的等待状态，而这些等待状态阻止了在异步链条中移动。
Solution
下面是几种解决异步嵌套问题的方法：
方法 1：使用 then 链
一种常见的方法是通过 then 链来解决多层异步嵌套问题。这种方法的好处是它避免了创建太多的等待状态，也减少了我们在代码中使用的 async 和 await 关键字的数量。
-------- ------------- -
-----------------
-------------- ---------- -
------ ------------------------
--
-------------- ----------------- -
------ --------------------------
--
-------------- -------- -
-------------------- -- ----
--
--------------- ------- -
--------------------- -- ------
---
-
-------- ------------------- -
------ --------------------------------- ----------------------------
-------------- ----------- ----------------- -
------ ----------------
---
-
-------- -------------- -
------ ------------------------------------ -------------------------------
-------------- ------------------ -------- -
------ --------------------------------
---
-方法 2：使用 try catch
另一种解决方法是使用 try...catch 代码块。通过这种方式，我们可以在异步链中使用 await 关键字，并在需要时处理任何错误。使用 try...catch 代码块时，您可以使用 throw 关键字来抛出错误，这样您就可以在 catch 代码块中处理这些错误了。
----- -------- ------------- -
--- -
----- -------- - ----- ------------------
----- --------------- - ----- ------------------------
----- ------ - ----- --------------------------
-------------------- -- ----
- ----- ------- -
--------------------- -- ------
-
-
----- -------- ------------------- -
--- -
----- -------- - ----- --------------------
----- --------------- - ----- ---------------------------
------ ----------------
- ----- ------- -
----- ------
-
-
----- -------- -------------- -
--- -
----- -------- - ----- -----------------------
----- --------------- - ----- ------------------------------
----- ------ - ----- --------------------------------
------ -------
- ----- ------- -
----- ------
-
-方法 3：重构代码
最后一种解决方法是对代码进行重构。如果您遇到了异步链中嵌套太多异步调用的问题，那么您可能需要重新设计代码。通过这种方式，您可以将一些重复的功能移到一个单独的函数中，并在需要时调用该函数。
----- -------- ------------- - ----- -------- - ----- ------------------ ----- --------------- - ----- ------------------------ ----- ------ - ----- -------------------------- -------------------- -- ---- - ----- -------- ------------------- - ----- -------- - ----- -------------------- ------ ----- ------------------------- - ----- -------- -------------- - ----- -------- - ----- ----------------------- ------ ----- ------------------------- - ----- -------- -------------------- - ----- --------------- - ----- --------------------------- ----- ------ - ----- -------------------------------- ------ ------- -
结论
在本文中，我们探讨了使用新引入的 await 关键字时，在多层嵌套的情况下可能会遇到的问题，并介绍了几种解决方法。 无论您使用哪种方法，您都应该小心使用 async 和 await 关键字，以避免错误和问题。 对于具有多层逻辑的代码，您应该考虑使用 Promise.all 或相应的库来帮助您管理异步流程。 按照以上这些方法，您可以轻松地解决任何异步嵌套带来的问题，使您的代码更加清晰和易于维护。
示例代码
以下是我们使用第一种解决方法的示例代码：
-------- ------------- -
-----------------
-------------- ---------- -
------ ------------------------
--
-------------- ----------------- -
------ --------------------------
--
-------------- -------- -
-------------------- -- ----
--
--------------- ------- -
--------------------- -- ------
---
-
-------- ------------------- -
------ --------------------------------- ----------------------------
-------------- ----------- ----------------- -
------ ----------------
---
-
-------- -------------- -
------ ------------------------------------ -------------------------------
-------------- ------------------ -------- -
------ --------------------------------
---
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719dcfc9b4aadf9e0063beb