在前端开发中，异步编程是一个不可避免的难题。无论是异步数据加载、网络请求、定时器等操作，都需要异步编程来解决问题。ECMAScript 2018 中引入的 for await...of 循环，就是为解决异步编程中遇到的问题而生。
for await...of 循环
在介绍 for await...of 循环之前，先回顾一下普通的 for...of 循环。for...of 循环可以遍历数组、Set、Map 等可迭代对象。它的语法结构如下：
for (let item of iterable) {
// do something with item
}在 for...of 循环中，我们可以使用 item 变量来获取可迭代对象中的每个元素。然而，如果这个可迭代对象是异步的呢？比如一个异步生成器函数返回的可迭代对象。
在 ECMAScript 2018 中，我们可以使用 for await...of 循环来实现异步可迭代对象的遍历。它的语法结构如下：
for await (let item of asyncIterable) {
// do something with item
}在 for await...of 循环中，我们使用 asyncIterable 变量来获取异步可迭代对象中的每个元素。同时，我们需要在循环体中使用 await 关键字来等待获取到的元素。
解决异步编程遇到的问题
使用 for await...of 循环，可以有效地解决异步编程中遇到的几个难题。
1. 迭代异步生成器函数返回的可迭代对象
异步生成器函数是 ES2018 引入的新特性，它可以返回一个异步可迭代对象。这个异步可迭代对象可以是 Promise 对象、异步生成器函数、迭代器和具有异步迭代器接口的其他对象。
使用 for await...of 循环，就可以轻松地迭代这个异步可迭代对象，获取其中的每个元素。比如下面的示例代码：
// www.javascriptcn.com code example
async function* asyncGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}
(async () => {
for await (let num of asyncGenerator()) {
console.log(num);
}
})();在这个示例中，异步生成器函数返回一个异步可迭代对象，其中包含三个 Promise 对象。使用 for await...of 循环，我们可以轻松地获取这三个 Promise 对象的结果并输出。
2. 迭代异步 Iterable 对象
由于异步编程中使用的都是异步操作，很多操作都会返回异步 Iterable 对象。这个异步 Iterable 对象中包含异步操作的结果，但我们需要使用异步编程技巧来获取这些结果。
使用 for await...of 循环，就可以对这个异步 Iterable 对象进行遍历，并对其中的元素进行操作。比如下面的示例代码：
// www.javascriptcn.com code example
const asyncIterable = {
[Symbol.asyncIterator]() {
let i = 0;
return {
async next() {
if (i < 3) {
await new Promise(resolve => setTimeout(resolve, 1000));
return { value: i++, done: false };
}
return { done: true };
}
};
}
};
(async () => {
for await (let num of asyncIterable) {
console.log(num);
}
})();在这个示例中，我们手动创建了一个异步 Iterable 对象，其中 next 方法返回了一个 Promise 对象。使用 for await...of 循环，我们可以轻松地遍历这个异步 Iterable 对象，并输出其中的元素。
学习与指导意义
使用 for await...of 循环，可以让我们更加轻松和优雅地解决异步编程中遇到的问题。它为异步编程增添了更多的可读性和可维护性。
在学习使用 for await...of 循环时，我们需要有一定的异步编程基础。同时，我们需要熟悉 Promise、async/await 等异步编程技巧，并了解如何编写异步生成器函数和异步 Iterable 对象。
总之，for await...of 循环是一个非常好的技术，可以让我们更好地面对异步编程。我们可以通过学习它，提高我们的编程技能和水平，更好地完成我们的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d27c9da941bf71344ae10a