Mastering Async Generators

In our previous lessons, we explored two powerful but separate worlds. First, we learned about generators, which allow us to produce values lazily, one at a time. Then, we moved into the world of asynchronous programming, using Promises and async/await to handle tasks that take time, like waiting for a timer or fetching data.

Up until now, our generator pipelines have been synchronous. This means that as soon as we asked for a value, the generator calculated it immediately. However, in modern web development, data often arrives in a "stream" over time. Imagine a social media feed where new posts appear every few seconds or a stock ticker where prices update constantly. To handle these situations, we need to combine generators with asynchronous logic. In this lesson, we will learn how to create and consume Async Generators, which allow us to produce and process sequences of data that arrive at their own pace.

To create a generator that can handle asynchronous tasks, we use the async function* syntax. This is a special type of function that combines the behavior of an async function with a generator. While a regular generator function returns an iterator, an async generator returns an Async Iterator.

A key technical detail to remember from our first lesson is that JavaScript uses special symbols to define how objects behave. While regular iterables use Symbol.iterator, these new async generators automatically implement Symbol.asyncIterator. This tells JavaScript that when we request the next value from the generator using the .next() method, it will return a Promise instead of the value object itself.

async function* simple() {
  yield "Async Data";
}

const it = simple();

// Without await: calling .next() returns a Promise
const response = it.next();
console.log(response); // Promise { <pending> }

// With await: we get the iterator result object { value, done }
(async () => {
  const result = await it.next();
  console.log(result); // { value: undefined, done: true }
})();

The real power of an async generator comes from using the yield keyword together with await. In a standard generator, yield pauses the function and sends a value back to the caller. In an async generator, we can yield await the result of a Promise. This allows the generator to wait for an asynchronous task to finish before it provides the next value to the consumer.

const delay = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));

async function* asyncCounter(limit, gap = 10) {
  for (let i = 1; i <= limit; i++) {
    yield await delay(gap, i);
  }
}

In this code snippet, we define a helper function called delay that returns a Promise resolving after a specific amount of time. Inside the asyncCounter generator, we use a for loop to count up to a limit. On each step, we await the delay function. This causes the generator to pause for the duration of the gap before it yields the current number. Each value yielded by this generator is wrapped in a Promise, meaning the consumer will only receive the number once the timer has finished.

Since async generators return Promises, we cannot use a standard for...of loop to iterate through them. If we tried, the loop would not know how to wait for the Promises to resolve. To solve this, JavaScript provides the for await...of loop. This loop is specifically designed to work with async iterators. It automatically waits for each Promise yielded by the generator to settle before moving on to the next iteration.

(async () => {
  const ticks = [];
  for await (const n of asyncCounter(5)) {
    ticks.push(n);
  }
  console.log("ticks:", ticks);
})();

Output:

ticks: [ 1, 2, 3, 4, 5 ]

In the example above, the for await...of loop starts the asyncCounter. It pauses at the first yield, waits for the delay to finish, and then assigns the resolved value to the variable n. It repeats this process for every value until the generator is finished. Even though the numbers are produced over time, the loop makes the logic look simple and sequential.

In professional applications, we rarely just stream simple numbers. More often, we stream complex objects that represent state changes or data updates. For instance, you might be building a system that tracks financial transactions or system health ticks. Because async generators can yield any type of data, they are perfect for creating these live data feeds.

async function* streamUpdates(count) {
  for (let i = 1; i <= count; i++) {
    yield await delay(15, { tick: i, balance: 1000 + i * 50 });
  }
}

(async () => {
  for await (const update of streamUpdates(3)) {
    console.log("update:", update);
  }
})();

Output:

update: { tick: 1, balance: 1050 }
update: { tick: 2, balance: 1100 }
update: { tick: 3, balance: 1150 }

In this streamUpdates function, we yield an object containing both a tick number and a calculated balance. This simulates a real-world scenario where data is being generated and updated dynamically. As the consumer iterates over this stream, they receive each update object exactly 15 milliseconds after the previous one, allowing them to process or display the data as it arrives.

When working with streams, things can sometimes go wrong. A network connection might drop, or a data source might return an invalid value. One of the best features of for await...of is that it works seamlessly with try/catch blocks. If an error is thrown inside the async generator, that error will propagate to the consumer, where it can be caught and handled gracefully.

async function* flaky() {
  yield 1;
  yield 2;
  throw new Error("stream failed");
}

(async () => {
  try {
    for await (const v of flaky()) {
      console.log("got:", v);
    }
  } catch (e) {
    console.log("stream error:", e.message);
  }
})();

Output:

got: 1
got: 2
stream error: stream failed

In the flaky generator, we yield two successful values before intentionally throwing an error. When we run the consumer loop inside a try block, it successfully prints the first two values. However, as soon as the generator throws the "stream failed" error, the loop stops, and the code jumps straight to the catch block. This prevents your entire application from crashing and gives you a clear place to run cleanup code or show an error message to the user.

In this lesson, we successfully merged generators and asynchronous patterns. We learned how to define async generators using the async function* syntax and how they automatically utilize Symbol.asyncIterator. We also practiced yielding values that involve delays and saw how the for await...of loop makes it easy to process these time-based streams. Finally, we looked at how to keep our applications stable by using try/catch to handle errors within our streams.

Now, it is time to practice these concepts. You will be building your own async generators to simulate data streams and practice consuming them with the loops we discussed. Let's head over to the exercises and start streaming some data!