随着 JavaScript 语言的不断发展，异步编程已经成为了现代前端开发中不可避免的一部分。为了更好地处理异步数据，ECMAScript 2017 中新增了异步迭代器和 for-await-of 循环，这两个新特性为我们提供了更加简单、高效的异步编程解决方案。
异步迭代器
在 ES6 中，我们已经可以使用 for...of 循环来遍历数组、字符串、Set、Map 等可迭代对象了。而在 ES2017 中，我们可以使用异步迭代器来遍历异步数据。异步迭代器是一个实现了 Symbol.asyncIterator 方法的对象，该方法返回一个异步迭代器对象，该对象可以使用 next() 方法来获取下一个异步值。
一个简单的异步迭代器的实现如下：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----上面的代码中，asyncIterable 对象实现了 Symbol.asyncIterator 方法，返回了一个异步迭代器对象。该对象的 next() 方法返回一个 Promise 对象，该 Promise 对象在异步值可用时 resolve，返回一个包含异步值的对象。for await...of 循环可以遍历异步迭代器中的所有异步值。
for-await-of 循环
在 ES2017 中，我们可以使用 for-await-of 循环来遍历异步迭代器中的所有异步值。for-await-of 循环是一个异步迭代器的语法糖，它可以自动调用异步迭代器的 next() 方法，并在异步值可用时暂停循环，等待 Promise 对象 resolve 后继续循环。
一个使用 for-await-of 循环遍历异步迭代器的例子如下：
-- -------------------- ---- -------
----- -------- ----------- -
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
--- ----- ------ --- -- -------------- -
-----------------
-
-
------------上面的代码中，我们使用 for-await-of 循环遍历了一个异步迭代器中的所有异步值。
总结
异步迭代器和 for-await-of 循环是 ES2017 中新增的两个重要特性，它们为我们提供了更加简单、高效的异步编程解决方案。我们可以使用异步迭代器来遍历异步数据，使用 for-await-of 循环来自动调用异步迭代器的 next() 方法，并在异步值可用时暂停循环，等待 Promise 对象 resolve 后继续循环。在实际开发中，我们可以将异步迭代器和 for-await-of 循环结合起来使用，处理异步数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651691ad95b1f8cacdee4c10