前言
在 JavaScript 中，异步编程已经成为了一种必备的技能。在 ES6 中，引入了生成器和迭代器，它们为异步编程提供了更好的支持。在 ES11 中，新增了 for await...of 迭代器，可以更方便地迭代异步生成器。
本文将介绍如何在 ES11 中使用 for await...of 迭代异步生成器，包括详细的示例代码和学习指导。
异步生成器
在 ES6 中，引入了生成器。生成器是一种特殊的函数，可以通过 yield 关键字暂停函数的执行，并返回一个值。在下一次调用生成器时，函数会从上次暂停的地方继续执行。
异步生成器是一种返回异步值的生成器。它使用 yield 关键字返回一个 Promise 对象，该 Promise 对象在异步操作完成后被解析为一个值。
以下是一个简单的异步生成器示例：
// javascriptcn.com 代码示例
async function* asyncGenerator() {
yield await new Promise(resolve => setTimeout(() => resolve(1), 1000));
yield await new Promise(resolve => setTimeout(() => resolve(2), 1000));
yield await new Promise(resolve => setTimeout(() => resolve(3), 1000));
}
(async function() {
for await (const value of asyncGenerator()) {
console.log(value);
}
})();
// 输出：1
// 输出：2
// 输出：3在上面的示例中，asyncGenerator 是一个异步生成器，它返回一个 Promise 对象。在 for await...of 循环中，每次迭代都会等待 Promise 解析，并将解析后的值赋给 value。
for await...of 迭代器
在 ES11 中，新增了 for await...of 迭代器，它可以更方便地迭代异步生成器。
以下是一个简单的 for await...of 迭代器示例：
// javascriptcn.com 代码示例
async function* asyncGenerator() {
yield await new Promise(resolve => setTimeout(() => resolve(1), 1000));
yield await new Promise(resolve => setTimeout(() => resolve(2), 1000));
yield await new Promise(resolve => setTimeout(() => resolve(3), 1000));
}
(async function() {
for await (const value of asyncGenerator()) {
console.log(value);
}
})();
// 输出：1
// 输出：2
// 输出：3在上面的示例中，for await...of 循环迭代了异步生成器 asyncGenerator 中的每个值，并将每个值赋给 value。
学习指导
使用 for await...of 迭代器可以更方便地迭代异步生成器，让异步编程变得更加容易。以下是一些学习指导：
熟悉异步编程的基本概念和技术，包括 Promise、async/await 和回调函数等。
熟悉生成器和迭代器的基本概念和用法，包括
yield和next方法等。学习如何编写异步生成器，包括使用 Promise、async/await 和回调函数等。
学习如何使用
for await...of迭代器，包括如何迭代异步生成器和如何处理迭代器返回的值。
总结
在 ES11 中，新增了 for await...of 迭代器，可以更方便地迭代异步生成器。使用 for await...of 迭代器可以让异步编程变得更加容易。
在学习异步编程和生成器和迭代器时，可以尝试使用 for await...of 迭代器来迭代异步生成器，并使用示例代码来加深理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655b3509d2f5e1655d561401