随着 JavaScript 的发展，异步编程已经成为了前端开发中不可避免的一部分。ES9 中引入了异步迭代器和 for-await-of 循环，让异步编程变得更加简单和优雅。
异步迭代器
在 ES6 中，我们已经熟悉了迭代器和生成器。迭代器是一种对象，可以通过 next() 方法来逐个访问集合中的元素。生成器则是一种特殊的函数，可以在需要时生成一系列值。
ES9 中，异步迭代器则是一种特殊的迭代器，可以在异步场景下使用。异步迭代器中的 next() 方法返回的是一个 Promise 对象，可以通过 then() 方法来获取异步操作的结果。
下面是一个简单的示例代码，演示了如何使用异步迭代器来遍历一个异步集合：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----在上面的示例代码中，我们定义了一个异步迭代器 asyncIterable，它可以通过 Symbol.asyncIterator 方法来获取一个异步迭代器对象。异步迭代器对象中的 next() 方法返回一个 Promise 对象，我们可以通过 await 来获取异步操作的结果。
在 for-await-of 循环中，我们可以直接使用 await 来获取异步迭代器中的值。这样，我们就可以在异步场景下方便地遍历一系列值了。
for-await-of 循环
for-await-of 循环是 ES9 中新增的一种循环语法，可以用来遍历异步迭代器中的值。for-await-of 循环和普通的 for-of 循环类似，但是可以处理异步操作。
下面是一个简单的示例代码，演示了如何使用 for-await-of 循环来遍历一个异步集合：
-- -------------------- ---- -------
----- -------- ----------- -
----- --- - --- -- ---
--- ------ --- -- ---- -
-----------------
-
-
------ ---------- -
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
--- ----- ------ --- -- -------------- -
-----------------
-
-----在上面的示例代码中，我们定义了一个异步函数 asyncFunc，其中使用了普通的 for-of 循环来遍历一个数组。然后，我们又定义了一个异步迭代器 asyncIterable，其中使用了 for-await-of 循环来遍历一个异步集合。
通过比较这两个循环，我们可以发现 for-await-of 循环的语法和普通的 for-of 循环非常类似，但是可以处理异步操作。在异步场景下，for-await-of 循环可以让我们更加方便地遍历异步集合中的值。
总结
在 ES9 中，异步迭代器和 for-await-of 循环为我们带来了更加优雅和简单的异步编程方式。通过使用异步迭代器和 for-await-of 循环，我们可以方便地遍历异步集合中的值，让异步编程变得更加高效和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653c7f227d4982a6eb69d0ac