异步 Generator 是 ECMAScript 2020 (ES11) 中新增的一个特性，它可以在异步函数的基础上更方便地实现异步迭代器。它可以让我们在处理异步数据时更加灵活，本文就来详细介绍一下异步 Generator 的使用方法。
异步 Generator 的基本概念
异步 generator 和普通 generator 有一个很大的不同，就是异步 generator 可以使用异步模式的 yield。 在普通 generator 中，我们使用 yield 来暂停函数执行。运行流程将回到生成器生成的最后一个值。但对于异步资源，例如异步API，我们需要暂停生成器来等待一个异步或者 promise 的结果，以便我们可以在获取结果后去做一些自己的业务逻辑。这时候我们就可以使用异步 generator。
异步 Generator 定义的方法要比普通的 Generator 多了个 async 关键字。它的形式如下：
async function* generateAsyncData() {
// do something...
yield await handleAsyncData(); // 等待一个异步或 promise 结果
// do something...
}我们在定义异步 generator 的时候可以在 function 关键字前面加上 async，yield 后面使用 await 关键字等待一个异步或者 promise 结果，这样可以保证异步 generator 的运行顺序，也使程序代码更加简洁、易读。
如何使用异步 Generator
在异步 generator 中，我们可以使用 for-await-of 循环来遍历异步生成器返回的异步序列。与普通的 for-of 不同，for-await-of 可以处理异步逻辑。
-- -------------------- ---- -------
----- --------- ------------------- -
----- ----- -------------------
----- ----- -------------------
----- ----- -------------------
-
-- -- ------------ ------
-------- -- -
--- ----- ---- ---- -- -------------------- -
------------------
-
-----在上面的例子中，我们使用生成器生成三个异步数据，然后使用 for-await-of 循环输出它们。 由于 for-await-of 是异步的，所以我们得到的结果也是异步的。
在异步 generator 中，我们也可以使用 throw 和 return 关键字，它们的用法与普通 generator 基本相同。
示例代码
最后我们来看一个使用异步 generator 处理数据的示例代码：
-- -------------------- ---- -------
----- -------- -------------------------- -
----- --- - ----- ----------------------------------------------------------
------ ----- -----------
-
----- --------- ------------------------- -
----- ---- - ----- --------------------------
----- -----
----- --- --------------- -- ------------------- -----------
----- ----------- - ----- --------------------------
----- ------------
-
-------- -- -
--- ----- ---- ---- -- ---------------------- -
------------------
-
-----在上面的例子中，我们定义了一个异步 generator handleDataAsync。在 handleDataAsync 中，我们使用 await 等待 fetchDataFromAPI 返回 todos 数据，再使用 yield 返回数据。 接着，我们让当前程序 sleep 5秒钟，然后返回另外一个名为 users 的数据。在 for await of 反复遍历生成器时，会等待返回的数据结果，然后将其输出到控制台上。
结论
在本文中，我们详细介绍了如何使用异步 Generator 开始异步 generator，通过示例代码我们学习了如何使用 for-await-of 循环遍历异步生成器，以及如何使用异步 Generator 处理数据等。在实际开发中，我们可以将异步 Generator 这个特性应用到异步逻辑处理中，从而让程序更加灵活、高效，代码也会更加简洁，易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67539e648bd460d3ada65c68