Generators and Iterators: Async generators function*

After reviewing what generator functions are, we can check what an async function generator is. The definition is quite similar to a regular function, with a small difference: it’s its next()method, which instead of returning an object, returns a promise.

Get Ricardo Granda Vásquez’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Then, we have that an async function* declaration creates an AsynGeneratorFunction object that, each time it is called, returns an AsyncGenerator object. This object, of course, implements the async iterator protocol. When we call the generator function for the first time, it invokes the function, and in each call to next()property, this latest returns a Promise that resolves to the iterator result object.

The async iterator and async iterable protocols

To achieve thisasync generator function, we need to implement both protocols, which in fact have similar interfaces with their pairs in generator functions. The only difference is that the object returned is wrapped in a promise function.

So, as shown in the graphic, we have an object that follows the async iterable protocol when it implements the [Symbol.asyncIterator]protocol, the next() function as a mandatory property, and the return and throw function as optional.

An async generator function combines the features of async functions and generator functions.

Await and Async

The keywords await and yield can also be used in the function body. When used, they give you the opportunity to handle asynchronous tasks when required. What does it mean? You can manage tasks that occur at different times by using await to ‘wait’ for their completion, and, in the meantime, leverage generator functions to generate values only when needed instead of generating them all at once.

When should I use an async generator function?

The Async Generator function can be very useful in different situations in which we need to control the sequence of async tasks.

1. Loading async data for pagination:When you need to retrieve data from an API, you can use an async function generator to iterate over each of the results for the pages just when it’s required.
2. Async Streams: If you are working with async data streams, like reading files, an async function generator can help manage those streams in a very controlled and efficient way.
3. Concurrency control: Async function generators can be very useful to control the concurrency of multiple async operations simultaneously. You can control how many operations are occurring at the same time and wait for their completion before continuing.
4. Iterating over async events flow: Within environments with async events, like real-time web apps or chats, an async generator function can be useful to iterate over those events in a controlled and efficient way.

Here you have an example of a pagination using async generator functions:

For more detailed information concerning generator functions in JavaScript, you can go to the following links:

Iterators and generators - JavaScript | MDN

function* - JavaScript | MDN

If you liked this article, don’t forget to like it and share it. If you have any questions, comment, or so on, please, let me know to info@ricardograndavasquez.com