ES8 带来了异步生成器和迭代器，这是一种非常强大的异步编程方式，用于在 JavaScript 中处理异步数据。异步生成器和迭代器为前端开发人员提供了更灵活和强大的异步编程工具。在本文中，我们将会深入了解异步生成器和迭代器的概念、用法和优点，并提供一些示例代码。
异步生成器和迭代器的概念和用法
异步生成器和迭代器是两种不同的概念，但它们常常被一起使用。一个异步生成器是一个函数，它可以像普通生成器一样生成一系列的值，但不是同步执行的。相反，每个值都是异步计算的，并且利用了 Promise API 来返回异步值。以下是一个示例异步生成器的定义：
async function* asyncGenerator() { let i = 0; while (true) { await new Promise(resolve => setTimeout(resolve, 1000)); yield i++; } }
上面的例子中，我们定义了一个 async function，它使用 async function with the yield* operator 定义了一个异步生成器。我们进一步通过 await 表达式来等待 1 秒钟，然后产生新的数字递增序列。在每次调用 next() 方法时，我们都会等待 1 秒钟，然后产生下一个递增的数值。
迭代器和异步生成器紧密结合，它是一种精细控制异步数据流的方法。在 JavaScript 中，每一个支持迭代的对象都有一个 [Symbol.iterator] 属性，这个属性是一个函数，返回的是一个包含 next() 方法的迭代器对象。在异步编程中，通过利用 yield* 操作符来返回异步数据。
以下是一个使用异步迭代器的示例：
async function display() { for await (let value of asyncGenerator()) { console.log(value); } }
在上面的示例中，我们创建了一个异步的 for 循环，用来遍历存储在 asyncGenerator 中的异步数据。每次运行循环时，我们都会等待异步数据处理完毕，然后将其输出到控制台。
异步生成器和迭代器的优点
异步生成器和迭代器的优点是显而易见的。这种异步编程结构允许我们处理多个异步流和数据，而且灵活性非常强。我们可以对异步数据流进行高效的遍历处理，而不需要使用回调函数或者进行其他复杂的处理。
异步生成器和迭代器也可以用于处理各种类型的异步操作，如 HTTP 请求、I/O 操作、数据库操作等。我们可以将异步操作放入异步生成器中，使用 async/await 带来的易读性和可维护性，来遍历处理异步数据流。
示例代码
以下是一个更完整的异步生成器和迭代器示例，可以用来了解其完整工作流程：
-- -------------------- ---- ------- ----- -------- -------------- - ----- -------- - ----- ----------- ------ ---------------- - ----- --------- ------------------- - --- ------------ - -- ----- ------ - -- ------------- --- ------------ - ------ - ---- - ----- -------------------------------- - - - ----- -------- ------------- - ----- ---- - - ----------------------------------------------- ----------------------------------------------- ---------------------------------------------- -- --- ----- ---- ---- -- -------------------- - ------------------ - - --------------展开代码
在上面的示例中，我们定义了一个异步生成器 dataGenerator，它可以接受一个 URL 数组作为参数，并返回一个异步数据流。我们进一步定义了一个迭代器，用于遍历所有异步数据流的 URL。在迭代器中，我们使用了 Promise API 和 async/await，从而支持异步操作和数据处理。
总体来说，异步生成器和迭代器提供了一种非常强大和灵活的异步编程方式，用于处理 JavaScript 中的异步数据。在日常的工作中，我们应该熟练掌握异步生成器和迭代器的使用，从而有效地处理和处理 HTTP 请求、I/O 操作等数据流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd9fc0a231b2b7ed04876c
