在 ECMAScript 2018（ES9）中，新增了异步生成器（Async Generator），它是 ES6 引入的生成器的一个新特性，具有更强大的异步处理能力，本文将详细讲解异步生成器的使用方法和注意事项。
什么是异步生成器
异步生成器是一类特殊的函数，可以使用 async 和 yield* 语法来迭代异步数据源（如异步请求、WebSocket 等），生成可异步处理的序列。与同步生成器相比，它可以在每次迭代过程中等待异步操作完成。
ES9 异步生成器的语法：async function* generatorName(){}
使用 yield* 语法时需要注意：只有可迭代对象才能使用清单运算符（spread operator）或 yield* 语法将值委派给其他生成器函数。
异步生成器的使用方法
异步生成器的使用方式与同步生成器基本相同，只需在函数前加上 async 关键字。
下面是一个简单的异步生成器示例，用于迭代异步请求的一组数据：
async function* asyncGenerator() {
const data = await fetch('http://example.com/data.json');
for (let value of data) {
yield value;
}
}在此示例中，我们使用了 fetch 函数异步获取数据，并基于该数据创建了一个异步生成器。该生成器从数据中提取每个值并使用 yield 将它们返回。
使用异步生成器时，可以像使用普通的生成器一样使用 for..of 循环语句迭代它们：
for await (let value of asyncGenerator()) {
console.log(value);
}异步生成器的注意事项
使用异步生成器时，需要注意以下几点：
- 异步生成器必须在函数头部添加 async 关键字。
- 每次迭代过程中，如果异步操作（如请求数据）未完成，则生成器将在该处暂停直到异步操作完成，并继续运行以生成下一个值。
- 可以使用 async/await 和 Promise 对象等方式处理异步操作。
- 在生成器函数内使用 yield* 语法时，只有可迭代对象才能使用清单运算符或 yield* 语法委派给其他生成器函数。
示例代码
以下是更为完整的示例代码，可以清晰地展示异步生成器的使用方法和注意事项：
async function* loadData() {
let page = 1;
while (page <= 3) {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`);
const data = await response.json();
yield* data;
page++;
}
}
(async function() {
for await (let record of loadData()) {
console.log(record);
}
})();在此示例中，我们创建了一个异步生成器函数 loadData()，用于从 REST API（typicode）中读取数据。该函数循环迭代页面数，发送一个包含当前页面数的请求，然后等待响应数据，并使用 yield* 将其返回。
在主函数中，我们使用 async/await 定义了一个立即执行函数，该函数使用 for-await-of 循环迭代生成器中返回的每个数据项，并将其打印到控制台中。
总结
ES9 中的异步生成器为 JavaScript 开发者提供了一种更加灵活的方式处理异步数据源。通过在函数头部添加 async 关键字，我们可以使用 yield 和 await 语句来开发具有异步迭代功能的生成器函数，帮助我们更好地处理异步数据和流式操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659fd178add4f0e0ff850b4e