引言
对于很多前端开发者来说，异步编程一直是一个重要的议题。在 JavaScript 中，我们经常需要处理异步操作，比如 AJAX 或者 Promise。
JavaScript 语言本身提供了几种处理异步操作的方式，比如回调函数、Promise 和 async/await 等等。但是在 ES8 中，又新增了一种处理异步操作的方式，就是异步迭代器和 for-await-of。
本文将会详细介绍 ES8 新增的异步迭代器和 for-await-of 的用法，以及演示其如何优化异步编程，让代码更加简洁、可读、可维护。
异步迭代器
异步迭代器允许我们在异步代码中使用 for...of 循环语句。它类似于普通的迭代器，但是它的返回值是一个 Promise 对象。
在 ES7 中，我们已经有了普通迭代器和 for...of 循环语句。这使得我们可以使用类似于 Python 的语法来遍历数组和其他可迭代对象。
然而，在异步代码中，我们无法使用普通迭代器和 for...of 循环语句来遍历异步操作的结果。这是因为异步操作是非阻塞的，我们无法保证异步操作会在一个迭代项被处理后立即完成。
异步迭代器的目的就是解决这个问题，它可以让我们在异步代码中使用 for...of 循环语句，以异步、非阻塞的方式遍历异步操作的结果。
for-await-of 循环语句
for-await-of 循环语句是 ES8 新增的一个语法，用于遍历异步迭代器。它类似于普通的 for...of 循环语句，但是它在遍历异步迭代器时会暂停循环，直到 Promise 状态变为 resolved。
我们可以使用 for-await-of 循环语句来循环遍历异步操作的结果，比如访问一个异步接口的多个数据集合。
示例代码
在下面的示例中，我们将使用 for-await-of 循环语句和异步迭代器来解决一个实际问题：同时访问多个数据集合并整合结果。
----- -------- --------------- -
----- ---- - -
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
--
----- -------- - ------------ -- ------------
----- --------- - ----- ----------------------
-- ---------------------
------ -
------------------------ -
----- -------- - -----------------------------
------ -
----- ------ -
----- - ----- ----- - - ----------------
-- ------ -
------ ----------------- ----- ---- ---
-
----- ---- - ----- -------------
------ ----------------- ----- ------ ------ ---- ---
-
--
-
--
-
------ -------- -- -
----- ---- - ----- ----------------
-- -- ------------ ---------------
--- ----- ------ ---- -- ----- -
------------------
-
-----在这个示例中，我们使用了 fetch API 来获取多个数据集合。在将这些 API 的响应整合为一个数组后，我们返回了一个包含异步迭代器的对象。
这个异步迭代器对象有一个方法 [Symbol.asyncIterator]()，它定义了异步迭代器的行为。在下一个示例中，我们将会详细介绍这个方法的实现。
在主函数中，我们使用了 for-await-of 循环语句来遍历异步迭代器的结果。在每次迭代中，我们都会输出每个数据集合的内容。
异步迭代器的实现
异步迭代器的实现需要定义一个异步迭代器对象，这个对象必须有一个方法 [Symbol.asyncIterator]()。
这个方法需要返回一个对象，这个对象必须有一个 next() 方法。next() 方法必须返回一个 Promise 对象，表示迭代器的下一个值。当异步迭代器完成迭代操作时，next() 方法应该将 Promise 对象的状态设置为 resolved。
在下面的示例中，我们定义了一个异步请求迭代器的对象，它可以遍历多个异步请求的响应结果：
----- ---- - -
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
--
----- -------- - ------------ -- ------------
----- --------- - ----- ----------------------
----- ------------- - -
------------------------ -
----- -------- - -----------------------------
------ -
----- ------ -
----- - ----- ----- - - ----------------
-- ------ -
------ ----------------- ----- ---- ---
-
----- ---- - ----- -------------
------ ----------------- ----- ------ ------ ---- ---
-
--
-
--在这个示例中，我们首先通过 fetch API 获取多个数据集合的响应。然后我们返回了一个异步迭代器对象，使用 [Symbol.asyncIterator]() 方法实现了异步迭代器的行为。
在这个异步迭代器对象的 [Symbol.asyncIterator]() 方法中，我们创建了一个普通的迭代器，然后利用这个迭代器实现了异步迭代器。在每个异步请求的响应返回时，我们将解析响应体的 JSON 数据，并将其作为异步迭代器的下一个值返回。
结论
ES8 中新增的异步迭代器和 for-await-of 循环语句，提供了一种非常方便的方式来处理异步操作的结果。它们相对于回调函数、Promise 和 async/await 等等，更加简洁、可读、可维护。
在实际的应用中，我们可以利用异步迭代器来遍历异步操作的结果，并将其整合为一个数据集合。这将会大大简化异步编程的代码，提高开发效率。
这里只是简单的介绍了异步迭代器和 for-await-of 循环语句的用法，并没有深入的探讨。如果想要了解更多关于异步编程的内容，可以参考回调函数、Promise 和 async/await 等等的相关文章。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673442070bc820c58247e517