制定 Iterator 和 Generator 是 JavaScript 编程中一大亮点，获得了前端开发者的极高评价。但随着 JavaScript 语言的发展，开发者越来越需要异步操作。由于 Iterator 和 Generator 主要为同步操作而设计，因此无法满足开发者对异步遍历的需求。ES8 引入了 AsyncIterator 和 AsyncGenerator 两种新特性，可以解决这个问题。
什么是 AsyncIterator 和 AsyncGenerator？
AsyncIterator 和 Iterator 很相似，它也是一种用于迭代集合的接口。与 Iterator 不同的是，AsyncIterator 支持异步遍历迭代器。在使用 AsyncIterator 时，开发者可以通过 await 关键字来暂停遍历直到迭代器提供更多的数据。
AsyncGenerator 是具有类似 Generator 行为的异步函数。与 Generator 函数可以使用 yield 暂停函数执行不同，AsyncGenerator 可以通过 await 关键字等待可用的异步数据。
AsyncIterator 和 AsyncGenerator 的优点
异步数据遍历已成为现代开发中不可避免的需求。使用 AsyncIterator 或 AsyncGenerator 可以使开发者更好地掌控异步数据，从而解决异步数据遍历问题。
- 通过将 Iterator 和 Generator 扩展为异步操作，AsyncIterator 和 AsyncGenerator 可以轻松地迭代异步数据和处理异步操作。
- AsyncIterator 和 AsyncGenerator 提供了更好的可维护性和复用性。开发者可以将特定的异步迭代器映射到简单的 Iterator 和 Generator，从而简化代码的编写。
- AsyncIterator 和 AsyncGenerator 提供了更清晰的执行流程。由于迭代器可以使用
await暂停或等待更多的数据，因此可以更好地控制代码执行流程，避免出现异步回调地狱。
AsyncGenerator 示例
以下示例演示了如何使用 AsyncGenerator 迭代异步数据：
async function* countUpToAsync(limit) {
let count = 0;
while (count < limit) {
await new Promise(resolve => setTimeout(resolve, 1000));
yield count++;
}
}
(async () => {
const asyncCounter = countUpToAsync(5);
for await (const count of asyncCounter) {
console.log(count);
}
})();在示例中，我们创建了一个名为 countUpToAsync 的异步生成器，并使用 async 和 yield 关键字创建了一个可以异步迭代到给定限制的计数器。
使用 for await...of 循环可以迭代异步计数器并以每秒钟一次的速度输出数字。由于使用了 await 关键字，循环会暂停直到 countUpToAsync 异步生成器提供更多的数据。
AsyncIterator 示例
以下示例演示了如何使用 AsyncIterator 迭代异步数据：
class AsyncArray {
constructor(...array) {
this.array = array.slice();
}
async *[Symbol.asyncIterator]() {
while (this.array.length > 0) {
await new Promise(resolve => setTimeout(resolve, 1000));
yield this.array.shift();
}
}
}
(async () => {
const asyncArray = new AsyncArray(1, 2, 3, 4, 5);
for await (const item of asyncArray) {
console.log(item);
}
})();在示例中，我们创建了一个名为 AsyncArray 的异步迭代器，并使用 async 和 yield 关键字创建了一个可以异步迭代到输入数组的计数器。
使用 for await...of 循环可以迭代异步数组并以每秒钟一次的速度输出数字。由于使用了 await 关键字，循环会暂停直到 AsyncArray 异步迭代器提供更多的数据。
总结
AsyncIterator 和 AsyncGenerator 是 JavaScript 异步编程的强大工具。使用它们可以轻松地迭代异步数据和处理异步操作。这些新特性可以提供更好的可维护性和代码复用性，并提供更清晰、更可控的执行流程。如果您目前需要处理异步数据，则建议开始尝试使用 AsyncIterator 和 AsyncGenerator。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f3356add4f0e0ff7e19ce