在 JavaScript 中，循环是一项非常常见的操作。尤其对于前端应用程序而言，循环操作更显得尤为重要。但是对于异步的操作，循环引起的问题会变得更加突出。ES10 引入了 for await...of 语句来解决这个问题。
什么是 for await...of 语句？
for await...of 语句允许我们在异步迭代器上使用 for...of 语句，这个语句的使用方式与 for...of 语句类似，但是使用在可迭代的异步迭代器上。异步迭代器是通常返回 Promise 的对象，这个 Promise 将被 resolve() 为 {value, done} 的形式。
考虑到打印异步任务数组的示例，这里使用 for await...of 语句。
-- -------------------- ---- -------
----- ----- - -- -- - ------ --- ----------------- -- - ------------- -- - ------------- ---- -- ------ --- -
----- ----- - -- -- - ------ --- ----------------- -- - ------------- -- - ------------- ---- -- ------ --- -
----- ----- - -- -- - ------ --- ----------------- -- - ------------- -- - ------------- ---- -- ------ --- -
----- --------- - ------- ------ -------
----- -------- -------------- -
--- ----- ------ ------ -- ---------- -
--------------------
-
-
---------------在这个例子中，executeTasks() 方法通过遍历 taskArray，并为每个任务输出其结果，将任务的结果存储在结果中。
如何使用 for await...of 语句？
在 JavaScript 中，我们通常将 Promise 实例返回给事件循环队列以获取结果。这时，当 Promise 被 resolve() 后，可以使用 then() 方法获取 Promise 的返回结果。但是，在某些情况下，事件循环队列可能不实时，从而导致 Promise 对象的返回超时。因此我们使用了 async/await 语法糖。async/await 可以将 Promise 实例返回给 await 表达式并等待 Promise 的解决。但是，await 只能用于单个异步方法。如果我们需要在多个异步方法中循环等待解决，for await...of 语句是必需的。
例如，在这段代码中，我们使用 fetch() 方法获取单词定义 JSON，并循环打印相关的例句。for await...of 循环等待单词定义 JSON 的解决。
-- -------------------- ---- -------
----- ----- - ----------------------
----- -------- -------------------- -
----- -------- - ----- -------------------------------------------------------------------
----- ---- - ----- ----------------
--- ----- ------ ------- -- -------------------------------------------- -
--------------------------
-
-
------------------------在此示例中，getExampleData() 方法使用 node-fetch 获取单词定义的 JSON 数据，对数据进行解析并使用 for await...of 循环等待单词相关的例句。当此代码运行时，for await...of 循环等待单词定义的 Promise 对象被解决后才会运行。
结论
由于异步操作在现代前端应用程序中变得日益普遍，使用 for await...of 语句能够帮助我们更简单地进行异步操作。在本文中，我们学习了 for await...of 语句的用法，如何在对象上使用，以及为什么这是一个非常有用的功能。现在，我们已经准备好使用 for await...of 循环结构来编写简洁且可读性好的异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3db2ff40ec5a964e548f6
