什么是 for-await-of？
在过去，我们可能只熟悉 for 循环，其通常是用于遍历数组或对象等集合类型。但在 ES2015 中，我们引入了 for-of 循环，它可以用于遍历任何可迭代的对象，例如数组、字符串、Map 和 Set 等集合。
在 ES2018 中，我们引入了 for-await-of 循环，它在特定场景下很有用。当我们编写异步代码时，有时我们需要按顺序处理来自多个异步操作的值，并在所有操作完成后进行后续操作。在这些情况下，处理异步操作的结果可以让程序员的工作更加直接简单。
for-await-of 循环就是针对这种场景的一种语言工具，它可以让我们以同步的方式处理多个异步操作的结果，而不必编写一系列嵌套的回调函数或使用 Async/Await。
for-await-of 的使用实例
为了更好地理解 for-await-of 循环的用法，我们以实际的例子来说明。假设我们有以下异步函数：
-- -------------------- ---- ------- ----- -------- ---------------------- - ----- -------- - ----- ------------------------------------------------ ------ ----- ---------------- - ----- -------- ---------------------- - ----- -------- - ----- ------------------------------------------------------ ------ ----- ---------------- - ----- -------- ------------------------ --------- - ----- -------- - ----- -------------------------------------------------------------------- ------ ----- ---------------- -
这些函数每个都会调用 Github API 并返回 JSON 数据。让我们现在想象这种情况：我们需要检索一个 Github 用户的详细信息、他们的所有仓库以及每个仓库的提交数。在处理异步操作的结果时，我们希望按顺序获取所有信息，也就是先获取用户详细信息、然后获取仓库列表，最后获取每个仓库的提交次数。
在过去，我们需要编写一系列回调函数，嵌套一起执行这些异步调用，或使用 Async/Await，例如这样：
-- -------------------- ---- -------
----- -------- ------------------------------------------ -
----- ----------- - ----- -----------------------
----- --------- - ----- -----------------------
----- -------- - ------------------- ------ -- -
----- ------- - ----- ------------------------ -----------
------ - --------- ---------- -------- ------- --
---
----- ------------------- - ----- ----------------------
------ - ----- ------------ -------------------- ------------------- --
-这种形式的代码已经很简洁并易于理解。但如果我们还有其他异步调用需要加入，并且这些调用需要在不同的顺序下执行，那么我们的代码将会变得越来越复杂。在这种情况下，我们可以使用 for-await-of 循环来优化代码。
我们可以在 for-await-of 循环中使用一个异步生成器函数，该函数会按照预期的顺序生成待处理的异步值，从而让我们可以使用 for-await-of 循环以同步的方式处理异步操作。具体实现如下：
-- -------------------- ---- -------
----- --------- -------------------------- -
----- ----------- - ----- -----------------------
----- ------------
----- --------- - ----- -----------------------
------ ----------
--- ------ ---- -- ---------- -
----- ------- - ----- ------------------------ -----------
----- - --------- ---------- -------- ------- --
-
-
----- -------- ------------------------------------------ -
----- ------- - - ----- ----- -------------------- -- --
--- ----- ------ ----- -- --------------------------------- -
-- ------------------------------- -
------------ - ------
- ---- -- ------------------------------ -
----------------------------------------
- ---- -- ---------------------------------- -
----- - - ----------------------------------------- -- ------ -- ----------------
------------------------------ - - ---------------------------------- ---- -------- ------------- - --
-
-
------ --------
-在这个代码片段中，我们首先创建了一个名为 generateUserReposCommits 的异步生成器函数。函数将生成器和用户详细信息、仓库列表以及每个仓库的提交数串联起来。每个值都被 yield 到 for-await-of 循环中以按顺序处理它们。
接下来，我们在 getUsersRepositoriesCommitsDetails 中使用 for-await-of 循环，循环里的变量 value 会依次等待完成 generateUserReposCommits 中的异步操作。然后我们根据每个 value 的属性来检测值的类型，并相应地处理每个值，直到循环结束。
最后，我们返回一个具有用户详细信息、每个仓库的提交信息的数组的对象。在这个例子中，我们将异步操作的逻辑分离到 generateUserReposCommits 中，将 getUsersRepositoriesCommitsDetails 恢复为最简单的形式。未来，如果我们需要添加其他异步调用，只需要在生成器函数中添加新的值即可。
结论
在本文中，我们介绍了 ES2018 中引入的 for-await-of 循环，它可用于按顺序处理多个异步操作的结果。通过上述实例，我们看到了在使用 for-await-of 循环时的语法和步骤。使用生成器和 for-await-of 循环可以让我们更容易地处理异步代码。此外，通过了解这些工具的使用，我们可以更好地了解如何优化异步代码并减少代码的复杂度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f47da5f40ec5a964ef0828