在 ECMAScript 2018 中，异步生成器函数成为了一个全新的特性。它既拥有生成器函数的可迭代性和迭代器接口，又能够异步生成值。本文将深入讲解异步生成器函数的概念、应用场景、语法和代码示例。
概念
异步生成器函数是一种返回异步生成器对象的函数。异步生成器对象拥有一个 next 方法，可以接受一个参数（用来返回中间值），返回一个 Promise 对象。异步生成器对象实现了可迭代协议和可等待协议，其中可迭代协议包含一个 Symbol.iterator 方法，用于返回异步迭代器对象。
异步迭代器对象也拥有一个 next 方法，可以接受一个参数（用来返回中间值），返回一个 Promise 对象。当异步迭代器对象遍历完全部值之后，next 方法返回的 Promise 对象状态为 resolved，其值的 done 属性为 true。
应用场景
异步生成器函数可以用来实现一些复杂的数据流处理场景，例如异步实时数据处理、分布式爬虫、异步数据生成等等。由于异步生成器函数具有异步处理的能力，因此可以很方便地实现异步数据生成和处理。在处理需要耗费大量时间和计算资源的数据流场景中，异步生成器函数非常实用。
语法
异步生成器函数的语法与生成器函数的语法非常相似，唯一的区别是在函数关键字前面加上了 async。下面是异步生成器函数的语法：
----- --------- ------------------- - -- ---------- -
示例
下面是一个使用异步生成器函数处理数组和批量下载图片的实例。该实例使用了 promise.all 和 async / await 来实现异步处理和下载图片。
----- --------- ------------------ -
----- --- - ------------
--- -------------- - --
--- ---- - - -- - - ---- ---- -
----- --- - --- --------
------- - --------
---------- - -- -- -
-----------------
-- --------------- --- ---- -
----------
-
----- ----
--
----------- - ------- -- -
--------------
--
-
-
----- -------- ---------------- -
----- ------ - ---
----- ---- - -
---------------------------------
---------------------------------
--------------------------------
--
--- ----- ------ --- -- ------------------- -
-----------------
-
----- ---------------------------- -- -
------ --- ----------------- ------- -- -
---------- - -- -- ----------
----------- - ------- -- --------------
---
----
-- -- --------- ---- --- ---------- ------
-在上面的代码示例中，首先定义了一个异步生成器函数 batchLoadImg，它用于批量下载图片。当每个图片下载完成时，它会返回一个 Promise 对象，其中 Promise 对象的值为当前下载完成的图片。在 downloadImages 函数中，使用 for await 循环异步迭代器，将每个图片放入一个数组中。然后，我们利用 Promise.all 和 async / await 来实现并行下载所有图片，并等待它们下载完毕。
总结
以上，我们详细地讲解了 ECMAScript 2018 中的异步生成器函数。通过本文的讲解，我们可以了解到异步生成器函数的概念、应用场景、语法和实例。异步生成器函数是一种非常实用的异步数据处理技术，它可以方便地处理耗费大量时间和计算资源的数据流场景。作为前端开发人员，我们可以将其用于实时数据处理、分布式爬虫、异步数据生成等场景中，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6652519ad3423812e46aa916