在前端开发中，异步操作已经成为了日常工作中的必要部分，而在 JavaScript 中，异步编程则是使用回调函数和 Promise 对象来处理。而 ES9 中新增的异步生成器函数则为我们带来了更为灵活和强大的异步编程方式。本文将详细介绍 ES9 的异步生成器函数的使用和特点。
什么是异步生成器函数？
异步生成器函数是 ES9 中新增的一个语法糖，它是一种特殊的函数，它可以异步地生成一组值，而不是在一个函数调用中返回一组值。它可以像普通的生成器函数一样使用 yield 关键字来定义生成的值序列，但是在异步生成器函数中，yield 后面要跟一个 Promise 对象，用来异步生成下一个值。同时，异步生成器函数也支持使用 await 关键字来等待 Promise 对象的完成。
在使用异步生成器函数时，我们需要先使用 async 关键字将函数标记为异步函数，然后使用 async function* 定义异步生成器函数，从而实现异步生成序列值的操作。在异步生成器函数中，我们可以使用 yield 关键字输出一个 Promise 对象，并在 Promise 对象完成时，将其值传递给生成器函数的调用方。同时，我们也可以在生成器函数中使用 yield* 关键字来将另一个生成器函数的生成序列输出到当前生成器函数中。
异步生成器函数的特点
异步实现
异步生成器函数的最大特点就是它支持异步实现。通过使用 Promise 对象作为 yield 的参数，可以让异步生成器函数变得非常强大，它可以异步地读取远程数据、操作 DOM 元素以及执行一些耗时的计算，从而实现高级的异步编程。
双向通信
在异步生成器函数中，我们可以使用 yield 将一些数据输出，并在异步操作完成后将结果传递回来。同时，通过在异步生成器函数中使用 await 可以等待异步操作完成后再获取数据，从而实现双向通信。这种双向通信的方式可以帮助我们更好地控制异步操作的流程和结果。
实现异步操作链
异步生成器函数可以支持链式调用，也就是一个异步操作执行完后，接着执行下一个异步操作。这种链式调用可以让我们在异步编程时，更加简洁明了地描述异步操作的执行顺序，提高了代码的可读性和可维护性。
简化代码
异步生成器函数还可以帮助我们简化代码，尤其是对于需要等待多个异步操作的情况。在异步生成器函数中，我们可以使用 yield* 来等待另一个异步生成器函数，从而替代嵌套的回调函数和 Promise 链，使代码更加简洁易懂。
使用异步生成器函数
下面，我们通过一个示例来演示如何使用异步生成器函数。这个示例的功能是通过异步操作从服务器中获取一组数据，并在获取到数据后，分批输出到客户端。
-- -------------------- ---- -------
----- --------- ---------------- ---- -
--- ---- - -----
----- ------ - ---- -
---- - ----- ------------------------------------------------------------
----- -----
----- -- ---
-
-
------ ---------- -
--- ----- ---- ---- -- ------------ ----- -
------------------
-
-----在上面的示例中，我们定义了一个名为 fetchData 的异步生成器函数，它使用 fetch 函数从服务器中获取一组数据，并使用 yield 将数据分批输出到客户端。同时，使用 await 等待异步操作完成后，再将数据返回给调用方。
在调用 fetchData 函数时，我们使用 for await...of 循环来遍历返回的异步序列值，并输出数据到控制台。
总结
异步生成器函数是一种非常强大和灵活的异步编程方式。通过使用异步生成器函数，我们可以实现异步读取远程数据、操作 DOM 元素以及执行一些耗时的计算等操作。同时，异步生成器函数也可以帮助我们简化代码、实现双向通信以及构建异步操作链，从而使我们的代码更加简洁、易读和可维护。在实际开发中，我们可以根据具体情况选择异步生成器函数进行异步编程，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fb11c48841e9894dda01f