在现代的网页应用中，异步操作是非常常见的。在处理异步操作时，我们通常会用到 Promise 和 async/await 等语句来进行处理。不过，这些语句都是针对单个异步操作的处理手法，而针对多个异步操作的场景下，我们可以考虑使用 ECMAScript 2017 中引入的新特性 for await...of 循环来进行迭代异步资源的操作。
for await...of 的作用
for await...of 循环可以迭代异步的迭代器，这样我们就可以方便地处理异步的数据源。在实际应用中，我们可以用 for await...of 循环来处理诸如数据库连接、读取文件、网络请求等异步操作。
使用 for await...of 循环的例子
下面我们给出一个简单的例子，展示 for await...of 循环的使用方法。假设我们有一个异步的数据源 dataIterator，我们需要从中读取数据并进行相应的处理。首先，我们需要定义一个异步的迭代器：
-- -------------------- ---- -------
----- --------- -------------- -
-- ------
----- ---- - --- -- -- -- ---
--- ------ - -- ----- -
-- ----
----- --- --------------- -- ------------------- -------
----- -------------------
-
-在这个例子中，我们定义了一个异步迭代器 dataIterator，它通过 Promise 实现异步操作。具体来说，我们首先定义了一个包含 5 个数据的数组 data，然后在 for 循环中对这个数据进行迭代。在每次循环时，我们使用了一个 Promise 对象来模拟异步操作，并使用 yield 命令向外输出一个 Promise 对象。 这个 Promise 对象的返回值就是数组中的一个元素。
接下来，我们就可以在这个异步迭代器上使用 for await...of 循环进行操作：
(async () => {
for await (const data of dataIterator()) {
console.log(data);
}
})();在这个例子中，我们使用了一个立即执行函数来异步地执行 for await...of 循环。其中，for 循环中的 data 就是异步迭代器中每一次迭代输出的 Promise 对象的返回值，我们可以在循环中利用这个返回值进行进一步的处理。
注意事项
使用 for await...of 循环时，需要注意以下几点：
- 异步函数必须返回一个异步迭代器对象。
- 异步迭代器对象必须遵循 Iterator 接口的规范，其中 next() 方法必须返回一个 Promise 对象。
- 在 for await...of 循环中，每次输出的对象都是一个 Promise 对象的结果，因此需要通过 await 命令获取实际的值。
总结
在现代的网页应用中，异步操作是非常常见的，而 for await...of 循环就是一种方便处理异步数据源的工具。通过这个新特性，我们可以更加简单地实现异步数据的迭代操作。不过，在使用这个特性时需要仔细处理每一个细节，以避免出现潜在的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503e51f95b1f8cacd0a95c1