随着 Web 开发的不断发展，前端开发也越来越复杂，涵盖的技术也越来越多。ES9 引入了新的异步 Generator 特性，它能够帮助开发者更好地处理异步操作，充分发挥 JavaScript 的异步特性，提升应用的性能和响应速度。
异步操作的问题
在前端开发中，异步操作是一个很常见的场景，例如 Ajax 请求、事件监听和定时器等。异步操作的问题在于，它们执行的过程中可能会受到异步操作的结果或异常的影响，需要等待异步操作结束才能继续执行下一步操作。这也导致了常常需要多层回调嵌套，代码结构不清晰、难以维护。
--------
---- --------------
-------- -------- ------ -
----------------- -------- -------- -
---------------- -------- -- -
---------------- --------
---
---
--
------ -------- -- -
------------------------ ---- ---------
-
---异步 Generator 的优势
异步 Generator 是一种将同步和异步操作有效结合的方案。Generator 是一种生成器函数，用于生成可迭代对象。异步 Generator 则是一种支持异步操作的生成器函数。
通过异步 Generator 可以将异步操作写成同步的形式。它利用了 Generator 函数可以暂停和恢复执行的特性，并且兼容异步操作。异步 Generator 可以暂停等待异步操作完成，然后恢复执行，并且可以传递异步操作的结果。
一方面，这使得代码结构更加清晰、易于维护。另一方面，异步 Generator 也提升了应用的性能和响应速度，减少了不必要的等待时间，增加了用户体验。
-------- -------------- -
--- -
----- ---- - ----- --------------------------- -- ----------
----- ------ - ----- -------------------------
----- ------------------------
---------------- --------
- ----- --- -
------------------------ ---- -------- ---
-
-
-----------------
-------- ---------------------- -
----- --------- - --------------------
-------- ------------------ -------------- -
--- -
----- - ------ ---- - - ----------------------
-- ------- -
----- ----------------- -------
-
- ----- --- -
----------------
-
-
----- ------------------ - ------------------------------------------
------ -------------------------------------------------
-使用 Async/Await
ES9 还引入了 Async/Await，它是基于异步 Generator 实现的语法糖。Async 函数返回的是一个 Promise 对象，可以使用 await 等待异步操作的结果，从而更加简洁、直观地编写异步代码。
----- -------- ------------- -
--- -
----- ---- - ----- ---------------------------
----- ------ - ----- -------------------------
----- ------------------------
---------------- --------
- ----- --- -
------------------------ ---- -------- ---
-
-总结
异步 Generator 是一种充分发挥 JavaScript 异步特性的方案，可以有效地解决异步操作的问题，提高应用的性能和响应速度。配合 Async/Await 语法糖使用，可以使复杂的异步操作代码更加简洁、易于理解、容易维护。
要使用异步 Generator，需要熟悉 ES6 中的 Generator，以及 Promise、async/await 等基础概念。同时，需要注意异步 Generator 在多次调用时，上下文的保存和传递，避免出现意料之外的结果。
代码示例：
-------- ---------------- -
------ --- ---------------- --------- ------- -
--------
---- ----
-------- --------
------ ------
---
---
-
-------- ------------------------ -
------ --- ---------------- --------- ------- -
----------------- -------- -------- -
----------------
---
---
-
-------- ----------------------- -
------ --- ---------------- --------- ------- -
---------------- -------- -- -
----------
---
---
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66441baed3423812e4203aa0