ES6 引入了 Generator 技术，允许开发者编写基于迭代协议的函数，可以控制函数的执行流程。在 ES10 中，Generator 技术进一步完善，增加了 Async Generator，可以用于更灵活的异步编程。
Generator
Generator 是一个迭代协议的函数，可以暂停和恢复函数的执行。Generator 函数通过使用 yield 关键字，允许开发者在不中断函数执行的情况下，从函数中返回一个值。
Generator 函数示例：
--------- ------------------ - ----- ------ ----- ------ ----- ------ -
使用 for…of 循环遍历 Generator 函数，获取每一个 yield 的值：
--- ---- ----- -- ------------------- - ------------------- - -- ------- ----- ----- -----
如果需要在 Generator 函数中接受参数，可以在调用 Generator 实例时传递参数：
--------- ----------------------------- - ----- - - -- ----- - - -- ----- - - -- - --- --- - ------------------------------ ------------------------------ -- ------- - ------------------------------ -- ------- - ------------------------------ -- ------- -
除了 next() 方法，Generator 还有其他方法，如 return() 和 throw()，可以用于控制函数的执行流程。
Async Generator
Async Generator 是一种异步可迭代协议，是 Generator 的扩展，可以返回异步值或 Promise，并且可以使用 await 表达式来处理异步调用。
Async Generator 函数示例：
----- --------- ----------------------- - ----- ----- ----------------------- ----- ----- ----------------------- ----- ----- ----------------------- -
使用 for await…of 循环遍历 Async Generator 函数，获取每一个异步 yield 的值：
----- -------- ------------------- -
--- ----- ---- ----- -- ------------------------ -
-------------------
-
-
--------------------
-- ------- ----- ----- -----示例代码
一个基于 async/await 和 Async Generator 技术的异步数据获取示例：
----- --------- -------------- -
--- -
--- -------- - ----- -----------
--- ---- - ----- ----------------
----- -----
- ----- ----- -
-------------------- -------- ----- - - -----
-
-
----- -------- ------------- -
--- ----- ---- ---- -- ----------------------- -
------------------ - - ------
-
-
--------------上述代码中，fetchData() 函数是一个 Async Generator，通过 fetch() 和 await 关键字从指定的 API 获取数据并解析 JSON。在 processData() 函数中，使用 for await…of 循环遍历 fetchData() 获取的数据。
总结
在 ES10 中，通过 Generator 和 Async Generator 技术，开发者可以编写更灵活、更高效的异步代码。虽然这两种技术可能会增加代码复杂度，但是在需要处理异步数据流时仍然是非常有用的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6649570dd3423812e4826b12