JavaScript 异步生成器函数

此函数在 ES9 (ECMAScript 2018) 中引入。JavaScript 中异步生成器函数的独特之处在于它们同时支持 await 和 yield 关键字。它返回一个异步迭代器，而不仅仅是普通的 Promise 或同步迭代器。

异步生成器函数与 JavaScript 中的异步函数和生成器函数不同。此函数结合了异步函数和生成器函数的特性。异步迭代器的 next() 函数总是返回一个 promise。

异步生成器和普通生成器之间的主要区别在于，异步生成器的 next() 方法返回一个 Promise，并且您可以在其主体内部使用 await，而普通生成器的 next() 方法同步返回一个迭代器结果，并且不支持在其主体内部使用 await。

语法

以下语法展示了 JavaScript 函数中的异步生成器。

说明

async：async 关键字告诉函数它是异步的。即使我们返回非 promise 值，该函数也始终返回一个 promise 值。

function*：函数后面的星号 (*) 表示它是一个生成器。

function_name()：给函数一个名称。

JavaScript 异步生成器函数的使用

JavaScript 异步生成器函数的使用场景如下：

适用于按块读取大文件：异步生成器函数对于处理大文件非常有用。异步生成器可以在数据块可用时在数据块之间生成，从而以更少的内存开销进行主动处理。

适用于管理复杂的异步工作流：当我们试图控制按确定顺序运行的一系列异步任务时，异步生成器提供了一种更清晰、更易于管理的方式来控制流程。它允许我们在流程中的定义点暂停或恢复执行。

适用于处理分页 API 请求：当我们处理返回分页数据且不保证页面长度统一的 API 时，异步生成器提供了一种更简单的方式来按顺序获取和处理每个页面。我们可以拥有数据的延迟加载功能。

实时数据源：它对于从 WebSockets 或事件流获取实时数据的应用程序非常有用。在这种情况下，我们可以使用异步生成器来迭代实时数据。这使得我们的应用程序能够响应事件，因为它们在不阻塞主线程的情况下发生。

JavaScript 异步生成器函数的示例

以下示例使用 JavaScript 中的不同方法和函数。

示例 1

在此示例中，我们利用 throw 关键字使用错误对象引发错误。该函数将包含用户提供的错误消息，然后我们将使用 catch 语句来更正错误。

输出

JavaScript async generator
Error thrown in the JavaScript async generator function....!!!

说明:

在上面的示例中，我们使用 async function * 定义了一个异步生成器。在这里，当生成器第一次运行时立即抛出错误。我们声明了一个名为 iterator_var 的变量。这将调用生成器，该生成器返回一个异步迭代器对象。它不会立即运行函数体，直到调用 .next() 方法。在这里，调用 .next() 来执行生成器。由于立即抛出错误，.next() 返回的 promise 被拒绝，并且 .catch() 捕获该错误并返回错误消息。

示例 2

在此示例中，我们将异步生成器与 yield 关键字配对。通过使用 catch 语句，我们将首先声明一个被拒绝的 promise，其错误消息在 reject() 方法中。

输出

JavaScript async generator 
Result thrown in the JavaScript async generator function using the yield method....!!!

说明

在上面的例子中，我们首先简单地打印了一条消息 JavaScript async generator。然后我们使用 function* generator_fun() 声明了一个异步生成器函数。当我们调用此函数时，它返回一个异步迭代器，该迭代器支持 .next()、.throw() 和 .return() 方法，并返回新的 promise。在这里，yield new Promise(…) 用于生成一个立即被错误消息拒绝的 promise。变量 let iterator_var 用于从异步生成器创建迭代器。在这里，iterator_var.next() 用于启动生成器并通过 .then 获取第一个 yield，我们打印了被拒绝的 promise。

示例 3

在此示例中，异步生成器函数演示了 yield 和 await 关键字的使用。

输出

JavaScript async generator
Hello Student
Welcome to Development World 

说明

在上面的示例中，我们只是打印了一条消息，JavaScript async generator。在这里，我们使用 use strict 来启用严格模式，以便我们可以捕获常见的编码错误。这里的 async function* function_data() 是一个异步生成器函数。当它被调用时，它返回一个异步迭代器。在这里，await new promise 等待 100 毫秒。这模拟了一个异步延迟。我们在这里写 yield 'Hello Student'，它在延迟之后作为第一个值返回 'Hello Student'，console.log('Welcome to Development World')。这在从生成器消耗值之后运行，在 yield 完成之后。const asyncfunction_data = function_data() 调用生成器函数并获取一个异步迭代器。在这里，我们定义 (async () => { … } ()，它是一个 立即调用表达式函数 (IIFE)，它允许我们在其中使用 await 和 for await。在这里，for await 迭代生成器返回的异步迭代器。"JavaScript async generator" 立即打印。100 毫秒后，'Hello Student' 被生成并在循环中打印。然后，在生成器完成后打印 "Welcome to Development World"。

示例 4

该示例使用运算符和函数显示迭代器值。迭代器显示异步生成器函数的起始值到结束值的数据。

输出

JavaScript async generator
2
3
4
5

说明

在上面的例子中，我们只是打印了一条消息，JavaScript async generator。我们声明了一个名为 asyncFunction 的异步生成器函数。该函数接受两个参数，start 和 end。在这里，async function* 关键字表示它可以异步生成值。在函数内部，我们定义了一个 for 循环，它从起始数字到结束数字。在这里，yield new Promise() 将一个 promise 返回给调用者。setTimeout() 函数将 promise 的解析延迟了 100 毫秒。完成 100 毫秒后，promise 用当前数字 y (async () => {} 立即运行一个异步 IIFE。定义 let sequence_var = asyncFunction(2, 5) 来调用一个 asyncFunction，其中 start = 2 和 end = 5。在这里，for await (let num_value of sequence_var) 用于 await…of 循环以异步地从生成器中消耗值。它会等待每个 Promise 解析后再继续下一次迭代。借助 console.log(num_value)，我们打印输出。

结论

JavaScript 异步生成器用于处理多个异步数据流。它用于 promise、迭代器和其他方法，以简单的方式管理复杂的功能。

常见问题

1. JavaScript 中生成器和普通函数的主要区别是什么？

在 JavaScript 中，生成器和普通函数的主要区别在于生成器可以暂停和重新启动，而普通函数则不能。一旦我们调用了普通函数，它就会运行直到完成，但对于生成器，它返回一个迭代器对象，该对象可用于随时间生成一系列值。

2. 生成器中 yield* 关键字的主要目的是什么？

生成器中 yield* 关键字的主要目的是将迭代表示给另一个生成器或可迭代对象。它允许生成器从另一个生成器或可迭代对象生成值，从而有效地展平迭代。

3. 如何声明异步生成器函数？

JavaScript 中的异步生成器函数使用 async 和 function* 关键字声明。

4. 异步生成器函数返回什么？

异步生成器函数返回一个 AsyncIterator 对象。此对象有一个 next() 方法，该方法返回一个 Promise，该 Promise 解析为一个具有 value 和 done 属性的对象，类似于普通迭代器。

5. 如何从异步生成器函数中消费值？

使用 for-await-of 循环从异步生成器函数中消费值。此循环迭代生成器生成的异步值，暂停执行直到每个 Promise 解析。

6. 如果异步生成器函数中发生错误会怎样？如何处理？

异步生成器函数中的错误可以使用生成器本身内的标准 try…catch 块捕获。当使用 for-await-of 消费生成器时，错误将传播，并且可以由围绕 for-await-of 循环的 try…catch 块捕获。