前言
在前端开发中，我们经常会使用到异步操作。而 ES9 中提出了一种新的异步编程方式 - Async Generator。本文将深入探讨这种编程方法，包括其概念和使用方法以及具有实践意义的示例代码。
概念
在讲解 Async Generator 之前，我们先来回忆一下 Generator，即生成器。Generator 可以用一种协程（协作式）的方式生成迭代器，为异步编程提供了一种解决方案。Async Generator 则在此基础上进一步增强，它可以在异步操作完成时将结果返回给迭代器，以便我们再次在迭代器上执行异步操作。
Async Generator 使用 async 和 yield* 来声明一个异步生成器。async 声明一个异步函数，而 yield* 可以用来在异步函数中调用其他异步函数。Async Generator 可以向迭代器返回值，而不仅仅是数据。
使用方法
下面是一个简单的 Async Generator，它用于获取指定城市电话的前三位。
async function* fetchAreaCode(city) {
let res = await fetch(`https://api.example.com/city/${city}/area_code`);
let areaCode = await res.json();
yield* areaCode.slice(0, 3);
}我们使用 async 函数声明 fetchAreaCode，yield* 语句则用于从数组中获取前三位数字。在迭代器上使用该 Async Generator，我们可以进行一些操作：
const iterator = fetchAreaCode('Beijing');
(iterator.next()).then(({ value }) => console.log(value)); // 输出 010
(iterator.next()).then(({ value }) => console.log(value)); // 输出 011
(iterator.next()).then(({ value }) => console.log(value)); // 输出 012可以看到，在这里我们使用迭代器的 next 方法不断获取 Async Generator 的返回值，每次返回的值是 Async 函数异步获取的 city 对应 areaCode 数组前三位元素值。
实例代码
下面是一个更加实际的使用 Async Generator 的示例代码。在该示例中，我们使用 Async Generator 实现了一个可以异步迭代的日志查询器。
-- -------------------- ---- -------
----- ------------- - ---
---
- ----- - --------
--
--------- ----------------- -
----- --------- - -------- -------- --------
----- ---- - ---
--- ---- - - -- - - ------ ---- -
----- ----- - ---------------------------------- - -------------------
-----------
------
---------- -----------
-------- ---- ------- -----
---
-
------ -----
-
---
- ----- - --------
--
----- -------- ----------------------- ------ -
------ --- --------------- -- -
------------- -- -
--------- ----- ------------------ ------ ------------- --
-- ------
---
-
---
- -- ---------- -- - -----
--
-------- ------------------ ------ -
----- ---- - ------------------
------ - ----- ------ ------------- -
-
---
- ------------
--
----- --------- --------------------- -
--- ------ - --
--- ----- - --
--- ------- - -----
----- --------- -
----- - ----- ----- - - ----- ----------------------- -------
-- ------------ --- -- -
------- - ------
- ---- -
------ -- ------
----- - ----- ----- --
-
-
-
---
- ------
--
----- -------- ---------------- -
----- --------- - ----------------------
--- - ------ - ----- ----- - - - ----- -----------------
----- ------ -
------------------
-- ------------ --- -- ------
-- ------ - ----- ----- - - - ----- ------------------
-
-
---
- ------ - ----
--
-------- --------------- -
----- - ----- ----- - - ------------- ----
------------------
-
---
- --
--
----------------- -- ------
---------------- -- ------这段代码使用 async 和 yield* 来声明生成器函数 queryAsyncGenerator，它调用异步查询器 asyncQueryAsync 来获取数据。随后，我们使用 while 循环对其进行迭代，并使用迭代器的 next 方法获取数据。如果获取的数据为空时，实际上会返回 { value: undefined, done: true }，从而停止 while 循环。
通过这个例子，我们可以看到 Async Generator 在日志查询、UI 模块、消息推送等多个场景中具有实际使用意义。它可以帮助我们更加高效地书写异步程序，从而提升我们的开发效率。
总结
本文深入探讨了 ES9 中的 Async Generator 的概念和使用方法，并提供了一个使用场景示例代码。通过学习 Async Generator，我们不仅可以更好地理解异步编程，而且可以在实际开发中获得更好的效果。希望对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f80b1ff6b2d6eab30331b1