随着 JavaScript 的不断发展，新的 ECMAScript 规范也在不断出现。ES9（也称为 ES2018）是其中最新的版本，也带来了许多新的特性，例如异步生成器（Async Generators）。这篇文章将讨论如何使用异步生成器，包括它们的优势、正确使用的方法和示例代码。
什么是异步生成器？
异步生成器是 ES9 中的一种新的语言结构，它是一个生成器函数，它的值可以是异步的。这意味着您可以使用异步/等待语法从异步生成器中获取值，这在以前的 ES 版本中是不可能的。
异步生成器的语法类似于常规生成器，但需要在函数前面添加 async 关键字，以指示其异步性。异步生成器使用 yield* 语句获取异步值，其语法类似于 yield 语句：
----- --------- --------------- -
----- ----- ----------------------- ---------
-请注意，上面的示例将返回一个异步迭代器对象。这意味着您可以使用 for-await-of 循环来迭代异步生成器返回的值。
异步生成器的优势
异步生成器为前端开发人员提供了许多有用的优势，如下所述：
更好的性能
异步生成器代码通常比使用传统的异步回调或 Promise 更简洁，易于维护。由于异步/等待语法完全基于 Promises，因此异步代码的性能也相对更好。
更容易地组合生成器
异步生成器提供了更容易地组合生成器的权限。您可以使用 yield* 语句来调用另一个生成器函数，您还可以使用 await 关键字在异步生成器之间传递值。
可读性更高
Async/await 语法具有极高的可读性。它使用原始 Promise API 和生成器来创建代码块，这使得编写和阅读复杂的异步代码更加容易。
如何正确地使用异步生成器
正确使用异步生成器需要以下几个步骤：
1. 安装支持异步生成器的运行时
在使用异步生成器之前，您需要确保在运行时环境中安装了顺畅运行异步生成器所需的配置（如 Node.js 的 v10 或更高版本）。如果要在浏览器中使用异步生成器，则需要使用 polyfill 或 transpiler。
2. 编写异步生成器函数
编写异步生成器函数与编写常规生成器函数相似。唯一的差异是您需要将 async 关键字与生成器函数一起使用，以指示生成器是异步的。
----- --------- --------------- -
----- ----- ----------------------- ---------
-3. 迭代异步生成器
您可以使用 for-await-of 循环来迭代异步生成器，就像在常规生成器中一样：
----- -------- ------ -
--- ----- ------ --- -- ---------------- -
-----------------
-
-
------- -- -- ------- -------示例代码
以下是一个完整的示例代码，展示如何正确使用异步生成器：
-- ------
-------- --------- -
------ --- --------------- -- ------------------- -----
-
-- -----
----- --------- ---------- -
--- ---- - - -- - -- -- ---- -
----- ------------ -- -- - -
----- --
-
-
-- -------
----- -------- ------ -
--- ----- ------ --- -- ----------- -
-----------------
-
-
------- -- -- - - - - -在上面的示例中，我们定义了一个异步生成器 generate，该生成器使用 delay 函数返回一个 Promise，该 Promise 会延迟 1 秒。当生成器生成了 5 个数字后，for-await-of 循环结束。
结论
异步生成器是 ES9 中一种强大且有用的语言结构。借助异步生成器，前端开发人员可以更容易地编写和维护具有高度可读性和性能优势的异步代码。在正确使用异步生成器之前，请仔细阅读并掌握本文中介绍的所有基础知识。希望这篇文章能够帮助您更好地理解 ES9 中的异步生成器。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673592e30bc820c5824f3504