在现代的前端开发中，异步操作已经成为了必不可少的一部分。因此，JavaScript 的异步编程也变得越来越重要。随着 ES9 (ECMAScript 2018) 的发布，新的异步迭代器和生成器的特性也已经被推出，并且为我们在异步编程中带来了更多的便利性和灵活性。
异步迭代器
在 ES6 中，我们已经了解了迭代器的基本概念。简单来说，迭代器是一种可以访问数据集合中所有元素的接口，而在 ES9 中，我们可以使用异步迭代器来处理异步数据集合。
异步迭代器和常规迭代器的最大区别在于异步迭代器中使用的 next() 方法返回的是一个 Promise 对象。异步迭代器可以在等待异步操作完成后让迭代器继续执行下一个异步操作。
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- ----- - --
------ -
----- ------ -
----- --- --------------- -- ------------------- -------
------ - ------ -------- ----- ----- --
-
--
-
--
----- -------- ------------------- -
--- ----- ------ ---- -- -------------- -
------------------ -- -- -- -- -- -
-
-
--------------------上述示例中，我们使用了一个简单的异步迭代器，它的 next() 方法每次会暂停 1 秒钟，然后返回一个自增的数字。我们通过 for-await-of 循环遍历了这个异步数据集合。
异步生成器
在 ES6 中，我们已经学习了使用生成器来迭代数据。而在 ES9 中，我们可以使用异步生成器来迭代异步数据。
异步生成器是一种同时使用了异步和生成器特性的函数。它通过 yield 关键字生成异步结果，并且使用 async/await 处理异步操作。
-- -------------------- ---- -------
----- -------- ------------- -
----- --------- - ----- --------------------------------------------------------------
----- ------- - ----- -----------------
----- --------- - ----- --------------------------------------------------------------
----- ------- - ----- -----------------
----- ------------ ------------
-
----- -------- -------------------- -
----- --- - --------------
----- ------ - ----- -----------
-------------------------- -- -----------
-
---------------------在上述示例中，我们使用了异步生成器 fetchPhotos() 来获取两个相册中的所有照片。我们首先使用 await 关键字获取每个相册的响应数据和它们包含的照片信息。然后，我们使用 yield 关键字返回这些照片的合并数组，最后使用 next() 方法获取异步生成器的值。
学习意义
ES9 中的异步迭代器和异步生成器为 JavaScript 中的异步编程增加了更多的可控性和规范性。异步迭代器可以让我们更方便地管理异步数据的迭代，异步生成器可以让我们更方便地组织异步操作的执行。
指导意义
使用异步迭代器和异步生成器可以让我们更好地处理复杂的异步编程需求，尤其是在处理异步数据和异步操作时。同时，在使用异步迭代器和异步生成器时，我们也需要注意它们的异步特性和 Promise 对象的使用，以避免出现各种异步问题和错误。
结论
异步迭代器和异步生成器是 ES9 中新增的两个重要特性，它们为 JavaScript 中的异步编程带来了更多的可控性和规范性。我们可以通过它们更好地处理复杂的异步编程需求。同时，在使用异步迭代器和异步生成器时，需要注意它们的异步特性和 Promise 对象的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671e40232e7021665ef7163e