Process asynchronous streams
Data arrives over time, such as network responses or delayed events.
JS Puzzles · Const
async generators
Async generators produce sequences lazily while allowing asynchronous work between values. Declare them with async function* and consume them using for await...of.
How it works
An async generator combines generator-style lazy production with asynchronous operations. Declare it with async function*, use yield to produce values, and consume the returned async iterable with for await...of; calls to next() produce promises.
Syntax
async function* name() { yield value; }Returns
The generator function returns an asynchronous iterable whose next() method returns promises.
Key points
- Write
async function*to create an async generator function. - The
asyncmodifier changes the generator so its iteration proceeds asynchronously. - Its body can await delays, promises, and network operations before yielding values.
- Consume the returned async iterable with a
for await...ofloop. - Choose async generators when sequence elements become available asynchronously.
Common mistakes
- Treating
next()as returning an iterator result immediately is incorrect; it returns a promise. - Use
for await...of, not ordinaryfor...of, when consuming an async iterable.
Example: Yield values asynchronously
async function* numbers() {
await new Promise(resolve => setTimeout(resolve, 10));
yield 1;
yield 2;
}
for await (const number of numbers()) {
console.log(number);
}The loop asynchronously consumes each value produced by the generator.
When to use it
Generate values on demand
A producer should avoid creating all results before the consumer requests them.
Coordinate asynchronous steps
A sequence requires await between yielded values.
Interview questions
QHow do you declare an async generator, and what does calling it return?
Declare an async generator with async function*. It can use both await for asynchronous work and yield for lazy value production, and calling it returns an async iterable object.
Follow-up: How should its output be consumed? Use for await...of, which waits for each asynchronously produced value.
QWhat does next() return on an async generator?
Each call to next() is asynchronous and returns a promise. The promise eventually provides the iterator result for the next yielded value.
Follow-up: Why is this useful for streaming? It lets production and consumption proceed on demand as asynchronous data becomes available.
QWhen would you choose an async generator?
Async generators are useful when a sequence arrives asynchronously, such as data downloaded in chunks. They allow asynchronous operations inside the generator while preserving generator-style iteration.
Follow-up: What syntax replaces synchronous iteration? Use for await...of rather than for...of.
Related
async iteratorsfor await...ofSymbol.asyncIteratoryieldawait