JavaScript 的最新版本 ES8（ECMAScript 2017）中，新增了一个非常重要的特性 - async generator。它同时结合了 async/await 和 generator 的优点，可以更方便地处理异步操作和流式数据，并且使用起来非常简单和直观。本文将详细介绍 async generator 的用法，包括定义和使用方式、与 Promise 的关系以及应用场景等方面。
async generator 的定义和使用方式
async generator，简单理解就是一个 async 函数，可以生成多个连续的值，这些值可以是 Promise 对象，也可以是普通的值。定义格式如下：
async function* foo() {
// generator body
}可以看到定义方式与普通的 generator 函数非常相似，只是将 function 关键字前加上 async，然后在函数内部使用 yield 语句产生值。不同的是，这里使用了 *（星号）来声明一个 generator 函数，并且使用了 async 修饰符。这样定义的函数返回的结果是一个异步迭代器（AsyncIterator），迭代器可以使用 for-await-of 循环来遍历，也可以使用 next() 方法来手动迭代。
下面是一个简单的示例代码，定义了一个 async generator 函数，模拟从服务器返回的一组数据：
async function* getData() {
for (let i = 1; i <= 10; i++) {
const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`);
const data = await response.json();
yield data;
}
}这里使用了 fetch API 来异步获取数据，然后使用 yield 语句在每次获取到数据时产生一个新值。接下来就可以使用 for-await-of 循环来遍历这个迭代器并打印数据了：
(async () => {
for await (const item of getData()) {
console.log(item);
}
})();async generator 和 Promise 的关系
async generator 和 Promise 之间有紧密的联系。可以看到 async generator 返回的每个值都可以是一个 Promise 对象，这个 Promise 对象所表示的是该值的异步操作的状态。这样一来，我们就可以使用 async/await 来处理这些异步操作，从而更好地控制程序的状态和逻辑。
在上面的 getData 函数中，每次获取数据其实就是一个异步操作，使用 await 关键字异步等待其结果返回。这样，不仅代码简洁易懂，而且操作流程非常清晰和直观。可以看到，使用 async generator 可以将异步操作和查询操作结合在一起，使得程序的结构更稳健、易于维护。
async generator 的应用场景
async generator 主要应用于异步操作和流式数据处理场景。例如，可以将其用于流式数据处理，即生成器的每个值都是一条数据的状态，对于数据的处理可以通过后续的 async/await 代码块来实现。
另外，async generator 也可以用于处理批量数据查询等场景。例如，我们可以定义一个异步生成器函数，生成指定页数的查询结果。这样一来，我们就可以在程序中实现对多页数据的查询和处理，而且代码结构也更加清晰和简洁。
总结
async generator 是 ES8 中新增的一个非常重要的特性，它结合了 async/await 和 generator 的优点，可以更方便地处理异步操作和流式数据，并且使用起来非常简单和直观。我们可以通过 async generator 对异步操作和流式数据进行处理，并且还可以结合其他的 ECMAScript 特性，使得程序的结构更加清晰和稳健。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65af827aadd4f0e0ff8f4231