随着前端应用程序的不断发展，异步操作越来越普遍。ES8 的新增特性——异步迭代器（async-iterator）成为了解决这一问题的良好解决方案。本文将详细介绍 ES8 中的异步迭代器。
概述
异步迭代器是一种特殊的迭代器，它可以通过一系列的 Promise 对象来迭代异步数据。在循环过程中，当一个 Promise 对象被解算，就会产生一个新的迭代值。
异步迭代器是基于普通迭代器（iterator）的增强版，以解决异步操作的问题。相较于普通迭代器，它可以使用 await 和 async 关键字进行底层实现。
创建异步迭代器
要创建异步迭代器，可以通过在 Symbol.asyncIterator 属性上定义异步迭代器来实现。下面这个模拟 API 调用的示例代码展示了如何创建异步迭代器：
-- -------------------- ---- -------
----- --- -
------------- -
--------- - ----- ---- -----
-
----- ------------------------- -
--- ---- ---- -- ---------- -
----- ----- -------------------------
-
-
----- ------------------- -
------ --- ----------------- -- -
------------- -- -
----------------------------
-- ------------------------ - -------
---
-
-
----- -------- ------ -
----- --- - --- ------
--- ----- ---- ---- -- ---- -
------------------
-
-
-------如上代码所示，通过使用 Symbol.asyncIterator 属性创建了异步迭代器。*[Symbol.asyncIterator]() 方法中通过 yield await 将异步操作转化为同步流程。
在上述代码示例中，我们构建了一个名为 API 的数据容器，其中创建了一个异步遍历器，它可以迭代异步返回的结果。
for await...of 循环
在异步迭代器中，通过 for await...of 循环来实现对异步数据的迭代。其语法类似于普通迭代器中的 for...of 循环，可以直接迭代异步产生的结果。
下面的代码示例中展示了使用 for await...of 实现的异步迭代器循环：
-- -------------------- ---- -------
----- --- -
------------- -
--------- - ----- ---- -----
-
----- ------------------------- -
--- ---- ---- -- ---------- -
----- ----- -------------------------
-
-
----- ------------------- -
------ --- ----------------- -- -
------------- -- -
----------------------------
-- ------------------------ - -------
---
-
-
----- -------- ------ -
----- --- - --- ------
--- ----- ---- ---- -- ---- -
------------------
-
-
-------在这个示例代码中，使用 for await...of 循环来遍历异步数据。在循环中，item 就是异步 Promise 对象的返回结果。
总结
在前端应用程序中，异步操作变得越来越常见，ES8 中的异步迭代器是解决这一问题的有效方式。本文中，我们了解了异步迭代器的概念、创建方法以及使用方式，并使用示例代码加以说明。
借助于 ES8 中的异步迭代器，你可以更轻松地处理异步数据，如服务端响应、文件上传、WebSockets 等，从而提高程序的可维护性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a91a1dadd4f0e0ff26b086