在 ECMAScript2019 中，新增了一项功能——for-await-of 循环，该新特性解决了 JavaScript 中的异步 I/O 问题。在本文中，我们将详细讨论 for-await-of 循环和异步 I/O，同时提供一些示例代码供读者学习和参考。
for-await-of 循环
for-await-of 循环可以与异步迭代器一起使用，用于遍历异步数据流。值得一提的是，异步数据流就是在当一个操作耗时较长时避免阻塞线程而被写入 JavaScript 的一种技术。具体而言，在 for-await-of 循环中，我们会重复调用迭代器的 next() 方法并等待其返回一个 Promise。下面是一个基本示例：
-- -------------------- ---- -------
----- -------- --------- -
--- ---- - ----- ------------
--- ----- ---- ---- -- ----- -
------------------
-
-
----- --------- ----------- -
--- ---- - --- -- ---
--- ---- ---- -- ----- -
----- -----------
----- -----
-
-
----- -------- ----------- -
------ --- --------------- -- -
------------------- ------
--
-上述代码会在 getData() 中等待 fetchData() 返回数据，然后在 for-await-of 循环中遍历数据。注意，我们必须在 for-await-of 中使用 let 关键字声明 item。此外，迭代器函数 fetchData() 是一个异步函数，它使用了简单的 Promise 并返回一个 generator。generator 会迭代一个数组，并以每 100ms 为间隔生成一个 Promise。在此过程中，主循环不会受到阻塞。
解决异步 I/O 问题
异步 I/O 问题指的是在 I/O 事件中使用异步（或回调）方式时，在处理事件序列时使用传统的 for 循环会出现阻塞的情况。下面是一个具体的示例：
for (let i = 0; i < 10; i++) {
let data = await fetchData(i);
console.log(data);
}在上述代码中，我们在一个 for 循环中调用异步函数，并在每一次迭代中等待结果。然而，此操作阻塞了主线程，因为每个迭代都需要等待 fetchData 函数返回结果。相反，我们可以使用 for-await-of 循环解决这个问题：
-- -------------------- ---- -------
----- -------- --------- -
--- ----- ---- ---- -- ------------ -
------------------
-
-
----- --------- ----------- -
--- ---- - - -- - - --- ---- -
----- -----------
----- ----- -------------
-
-在上述代码中，我们将数据流处理移到了 generator 中，并使用 for-await-of 循环对其进行遍历。为了伪造异步数据流，我们使用了一个简单的计时器，并返回一个 Promise。
总结
在本文中，我们详细探讨了 ECMAScript 2019 中的 for-await-of 循环和解决异步 I/O 问题的方式。重点强调了异步数据流的概念，并且给出了使用异步 I/O 的示例代码。如果一个函数需要很多时间来处理，最好将它放到异步 I/O 事件中并使用 for-await-of 循环来遍历数据流，从而避免主线程的阻塞。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6521dc3295b1f8cacd940ac3