什么是 for-await-of 循环语句？
在 JavaScript 中，for 循环可以用来遍历数组、对象等数据结构。在 ES2015 中，引入了 for...of 循环语句，它可以遍历可迭代对象，比如数组、Set、Map 等。
在 ES2018 中，新增了异步迭代器（async iterator）的概念，即一种支持异步操作的迭代器。为了方便处理异步迭代器，ES2019 中推出了 for-await-of 循环语句，它可以用来遍历异步迭代器提供的异步数据。
当使用 for-await-of 循环语句遍历一个异步迭代器，它会循环等待每个异步操作完成并返回结果，然后再进入下一次循环。这意味着在异步迭代器中，每个元素都是在前一个元素完成异步操作之后才能被处理。
如何使用 for-await-of 循环语句？
要使用 for-await-of 循环语句，需要满足以下两个条件：
- 遍历的数据必须是异步迭代器；
- 循环体必须是异步函数
下面是一个示例，展示如何使用 for-await-of 循环语句遍历异步迭代器：
----- -------- --- -
----- ------------- - -------------------
--- ----- ------ ---- -- -------------- -
------------------
-
-
----- --------- ------------------ -
----- --- --------------- -- ------------------- -------
----- --
----- --- --------------- -- ------------------- -------
----- --
----- --- --------------- -- ------------------- -------
----- --
-在上面的示例中，getAsyncIterable 函数返回的是一个异步迭代器。它使用了 async/await 关键字模拟异步操作，等待 1 秒之后才会返回一个值。当使用 for-await-of 循环遍历这个异步迭代器时，它会等待每个异步操作完成并返回结果后，再进行下一次循环。
案例分析
为了更好地理解 for-await-of 循环语句的使用场景，下面以一个实际的案例来进行分析。
假设你的网站需要从后端 API 中获取用户列表，并对每个用户做一些处理，然后再将这些处理结果显示到页面上。由于用户列表非常长，在浏览器中需要使用异步请求来获取用户数据。同时，为了避免一次性请求过多数据导致服务器负载过高，你需要使用异步迭代器来进行分段请求。
下面是一份简要的代码实现：
----- -------- ---------- -
----- -------- - ----- --------------------
----- ----- - ----- ----------------
----- --------- ------------------------- -
--- ------ ---- -- ------ -
----- -------- - ----- -------------------------------
----- -------- - ----- ----------------
----- ---------
-
-
----- ------------- - --------------------------
--- ----- ------ ---- -- -------------- -
----- ------------- - ------------------
---------------------------
-
-
-------- ----------------- -
-- ------
-
-------- ----------------- -
-- ------
-在上面的代码中，getUsers 函数使用了 fetch API 来从后端 API 中获取用户列表，然后将其转换成 JSON 格式的数据。接下来，它定义了一个 asyncUserGenerator 函数作为异步迭代器来分段请求每个用户的详细信息。在 for-await-of 循环中，使用了 asyncUserGenerator 函数返回的异步迭代器来遍历每个用户，并对每个用户做一些处理，最后将处理结果显示到页面上。这就是使用 for-await-of 循环语句遍历异步数据的情景。
总结
for-await-of 循环语句是 JavaScript 中处理异步数据的有力工具，可以用来遍历异步迭代器提供的异步数据。使用它可以方便地处理需要进行异步操作的数据结构，比如从后端 API 中获取的数据。在使用它时，需要满足两个条件：遍历的数据必须是异步迭代器，循环体必须是异步函数。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6533a3177d4982a6eb730fed