在 JavaScript 中，异步编程一直是个非常常见的问题。ES6 引入的 Promise 解决了部分问题，但是还存在一些难点，比如逐步处理异步操作、消耗异步生成器等。ES8 引入了 Async Generator 函数，这个新特性可以让前端开发者更加简单地完成异步编程。
Async 函数回顾
在介绍 Async Generator 函数之前，我们需要先回顾一下 Async 函数。Async 函数是 ES7 中引入的新特性，可以简化 Promise 的使用方式。Async 函数使用起来非常方便，其语法如下：
async function foo() {
// 代码...
}Async 函数需要使用 await 关键字进行异步操作的等待，如果异步操作出错，需要使用 try...catch 进行错误处理。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- -------- ----------------- -
--- -
----- -------- - ----- -----------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-上述代码中，我们使用了 fetch 方法异步获取用户数据。由于异步操作的等待需要一定的时间，使用了 await 等待异步操作完成后再继续执行代码。如果在异步操作和数据解析的过程中出现了错误，则会被 catch 语句捕获并进行处理。
Generator 函数回顾
Generator 函数也是 ES6 中引入的一种新特性，它可以控制函数的迭代过程。Generator 函数主要有两个特点：
- 函数可以在执行过程中被暂停，随后再从暂停处继续执行。
- 函数可以返回一个迭代器对象，可以自行控制迭代过程。
Generator 函数的语法如下：
function* foo() {
// 代码...
}我们需要使用 yield 关键字来暂停函数的执行并返回一个值，使用 next 方法来从上一次暂停的地方继续执行。下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- --------- -
--- - - --
----- ------ -
----- ----
-
-
----- - - ----------
---------------------------- -- -
---------------------------- -- -
---------------------------- -- -上述代码中，我们定义了一个 counter 函数，该函数可以返回一个迭代器对象 c。我们调用 next 方法，就可以从上一次暂停的地方继续执行。yield 关键字可以返回一个值，这个值可以被 next 方法得到并进行处理。
Async Generator 函数
Async Generator 函数就是将 Async 函数和 Generator 函数结合起来形成的新特性。它可以为异步操作提供更加灵活的迭代方式。Async Generator 函数的语法如下：
async function* foo() {
// 代码...
}上述代码中，我们需要将 async 和 function* 关键字组合使用来定义一个 Async Generator 函数。
在 Async Generator 函数中，我们可以使用 yield 关键字暂停函数的执行并等待一些异步操作的结果。需要注意的是，这个异步操作也必须是一个 Generator 对象。
下面是一个基本的 Async Generator 函数示例代码：
-- -------------------- ---- -------
----- --------- ------------------- -
--- ------ ------ -- -------- -
----- -------- - ----- -----------------------------
----- ---- - ----- ----------------
----- -----
-
-
----- ----- - -------------- -- ----
-------------------------- -- ---------------------------
-------------------------- -- ---------------------------
-------------------------- -- ---------------------------上述代码中，我们定义了一个 fetchUsers 函数，通过传入一个用户 ID 的数组来获取用户数据。fetchUsers 函数是一个 Async Generator 函数，其中使用了 yield 关键字等待异步操作的结果。这样，我们可以将用户数据逐一地返回。在调用 next 方法时，返回的结果需要使用 Promise 进行处理。
总结
Async Generator 函数是 ES8 中的一个新特性，它结合了 Async 函数和 Generator 函数的特性，可以更加方便地进行异步编程。通过使用 yield 关键字暂停函数的执行，我们可以等待异步操作的结果，在需要的时候逐步地生成数据。这个新特性可以在前端开发中更好地处理异步操作，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec5d7af6b2d6eab36a2ccf