A deep dive into asynchronous generators and asynchronous iteration in Node.js

The appearance of generator functions in JavaScript predates the introduction of async/await, which means that when creating an asynchronous generator (which always returns a Promise and can await generator), it also introduces many things that need attention.

Today we’ll look at asynchronous generators and their close cousin, asynchronous iteration.

NOTE : Although these concepts should apply to all javascript following modern specifications, all code in this article is specific to Node.js 10, 12, and 14 version developed and tested.

Video tutorial recommendation: node js tutorial

Asynchronous generator function

Look at this small program:

// File: main.js
const createGenerator = function*(){
  yield 'a'
  yield 'b'
  yield 'c'
}

const main = () => {
  const generator = createGenerator()
  for (const item of generator) {
    console.log(item)
  }
}
main()

This code defines a generator function, uses this function to create a generator object, and then uses for ... of to loop through the generator object. Pretty standard stuff - although you'd never actually use a generator for something as trivial as this. If you are not familiar with generators and for ... of loops, please read "Javascript Generators" and "ES6 Loops and Iterable Objects" These two articles. Before using async generators, you need to have a solid understanding of generators and for ... of loops.

Suppose we want to use await in the generator function. Node.js supports this feature as long as the function needs to be declared with the async keyword. If you are unfamiliar with asynchronous functions, please read the article "Writing Asynchronous Tasks in Modern JavaScript".

Modify the program below and use await in the generator.

// File: main.js
const createGenerator = async function*(){
  yield await new Promise((r) => r('a'))
  yield 'b'
  yield 'c'
}

const main = () => {
  const generator = createGenerator()
  for (const item of generator) {
    console.log(item)
  }
}
main()

Also in actual work, you wouldn't do this - you might await a function from a third-party API or library. In order to make it easy for everyone to grasp, our examples are kept as simple as possible.

If you try to run the above program, you will encounter a problem:

$ node main.js
/Users/alanstorm/Desktop/main.js:9
  for (const item of generator) {
                     ^
TypeError: generator is not iterable

JavaScript tells us that this generator is "non-iterable". At first glance, it seems that making a generator function asynchronous also means that the generator it produces is not iterable. This is a bit confusing since the purpose of generators is to produce "programmatically" iterable objects.

The next step is to figure out what happened.

Check the generator

If you read the Javascript generator article, then you should know that if the object defines Symbol.iterator method, and the method returns, it is an iterable object that implements the iterator protocol in javascript. When an object has a next method, the object implements the iterator protocol, and the next method returns a property with a value, done An object with either one of the properties or both the value and done properties.

If you use the following code to compare the generator objects returned by the asynchronous generator function and the regular generator function:

// File: test-program.js
const createGenerator = function*(){
  yield 'a'
  yield 'b'
  yield 'c'
}

const createAsyncGenerator = async function*(){
  yield await new Promise((r) => r('a'))
  yield 'b'
  yield 'c'
}

const main = () => {
  const generator = createGenerator()
  const asyncGenerator = createAsyncGenerator()

  console.log('generator:',generator[Symbol.iterator])
  console.log('asyncGenerator',asyncGenerator[Symbol.iterator])
}
main()

, you will see that the former does not have Symbol.iterator method, while the latter has.

$ node test-program.js
generator: [Function: [Symbol.iterator]]
asyncGenerator undefined

Both generator objects have a next method. If you modify the test code to call this next method:

// File: test-program.js

/* ... */

const main = () => {
  const generator = createGenerator()
  const asyncGenerator = createAsyncGenerator()

  console.log('generator:',generator.next())
  console.log('asyncGenerator',asyncGenerator.next())
}
main()

, you will see another problem:

$ node test-program.js
generator: { value: 'a', done: false }
asyncGenerator Promise { <pending> }

In order to make the object iterable, next Method needs to return an object with value and done properties. An async function will always return a Promise object. This feature will be carried over to generators created with asynchronous functions - these asynchronous generators will always yield a Promise object.

This behavior makes it impossible for generators of async functions to implement the javascript iteration protocol.

Asynchronous Iteration

Fortunately there is a way to resolve this contradiction. If you take a look at the constructor or class <pre class="brush:js;toolbar:false">// File: test-program.js /* ... */ const main = () =&gt; { const generator = createGenerator() const asyncGenerator = createAsyncGenerator() console.log(&amp;#39;asyncGenerator&amp;#39;,asyncGenerator) }</pre> returned by the

generator you can see that it is an object whose type or class or constructor is AsyncGenerator while Not Generator:

asyncGenerator Object [AsyncGenerator] {}

Although the object may not be iterable, it is asynchronous iterable.

要想使对象能够异步迭代，它必须实现一个 Symbol.asyncIterator 方法。这个方法必须返回一个对象，该对象实现了异步版本的迭代器协议。也就是说，对象必须具有返回 Promise 的 next 方法，并且这个 promise 必须最终解析为带有 done 和 value 属性的对象。

一个 AsyncGenerator 对象满足所有这些条件。

这就留下了一个问题——我们怎样才能遍历一个不可迭代但可以异步迭代的对象？

for await … of 循环

只用生成器的 next 方法就可以手动迭代异步可迭代对象。 （注意，这里的 main 函数现在是 async main ——这样能够使我们在函数内部使用 await）

// File: main.js
const createAsyncGenerator = async function*(){
  yield await new Promise((r) => r('a'))
  yield 'b'
  yield 'c'
}

const main = async () => {
  const asyncGenerator = createAsyncGenerator()

  let result = {done:false}
  while(!result.done) {
    result = await asyncGenerator.next()
    if(result.done) { continue; }
    console.log(result.value)
  }
}
main()

但是，这不是最直接的循环机制。我既不喜欢 while 的循环条件，也不想手动检查 result.done。另外， result.done  变量必须同时存在于内部和外部块的作用域内。

幸运的是大多数（也许是所有？）支持异步迭代器的 javascript 实现也都支持特殊的  for await ... of  循环语法。例如：

const createAsyncGenerator = async function*(){
  yield await new Promise((r) => r('a'))
  yield 'b'
  yield 'c'
}

const main = async () => {
  const asyncGenerator = createAsyncGenerator()
  for await(const item of asyncGenerator) {
    console.log(item)
  }
}
main()

如果运行上述代码，则会看到异步生成器与可迭代对象已被成功循环，并且在循环体中得到了 Promise 的完全解析值。

$ node main.js
a
b
c

这个 for await ... of 循环更喜欢实现了异步迭代器协议的对象。但是你可以用它遍历任何一种可迭代对象。

for await(const item of [1,2,3]) {
    console.log(item)
}

当你使用 for await 时，Node.js 将会首先在对象上寻找 Symbol.asyncIterator 方法。如果找不到，它将回退到使用 Symbol.iterator 的方法。

非线性代码执行

与 await 一样，for await  循环会将非线性代码执行引入程序中。也就是说，你的代码将会以和编写的代码不同的顺序运行。

当你的程序第一次遇到 for await 循环时，它将在你的对象上调用 next。

该对象将 yield 一个 promise，然后代码的执行将会离开你的 async 函数，并且你的程序将继续在该函数之外执行。

一旦你的 promise 得到解决，代码执行将会使用这个值返回到循环体。

当循环结束并进行下一个行程时，Node.js 将在对象上调用 next。该调用会产生另一个 promise，代码执行将会再次离开你的函数。重复这种模式，直到 Promise 解析为 done 为 true 的对象，然后在 for await 循环之后继续执行代码。

下面的例子可以说明一点：

let count = 0
const getCount = () => {
  count++
  return `${count}. `
}

const createAsyncGenerator = async function*() {
  console.log(getCount() + 'entering createAsyncGenerator')

  console.log(getCount() + 'about to yield a')
  yield await new Promise((r)=>r('a'))

  console.log(getCount() + 're-entering createAsyncGenerator')
  console.log(getCount() + 'about to yield b')
  yield 'b'

  console.log(getCount() + 're-entering createAsyncGenerator')
  console.log(getCount() + 'about to yield c')
  yield 'c'

  console.log(getCount() + 're-entering createAsyncGenerator')
  console.log(getCount() + 'exiting createAsyncGenerator')
}

const main = async () => {
  console.log(getCount() + 'entering main')

  const asyncGenerator = createAsyncGenerator()
  console.log(getCount() + 'starting for await loop')
  for await(const item of asyncGenerator) {
    console.log(getCount() + 'entering for await loop')
    console.log(getCount() + item)
    console.log(getCount() + 'exiting for await loop')
  }
  console.log(getCount() + 'done with for await loop')
  console.log(getCount() + 'leaving main')
}

console.log(getCount() + 'before calling main')
main()
console.log(getCount() + 'after calling main')

这段代码你用了编号的日志记录语句，可让你跟踪其执行情况。作为练习，你需要自己运行程序然后查看执行结果是怎样的。

如果你不知道它的工作方式，就会使程序的执行产生混乱，但异步迭代的确是一项强大的技术。

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of A deep dive into asynchronous generators and asynchronous iteration in Node.js. For more information, please follow other related articles on the PHP Chinese website!