Introduction

Before async and await became common, many JavaScript codebases used generators plus Promise runners to write asynchronous flows that looked synchronous. That pattern is still useful when you need explicit execution control, custom scheduling, or legacy compatibility. This article explains generator-style async, shows a minimal runner, and compares it with modern async and await.

How Generator-Style Async Works

A generator function can pause at yield and resume later. If each yielded value is a Promise, a runner can wait for resolution and feed the result back into the generator.

1function* fetchSequence(api) {
2  const user = yield api.getUser(42);
3  const posts = yield api.getPosts(user.id);
4  const stats = yield api.getStats(user.id);
5
6  return {
7    user,
8    postCount: posts.length,
9    stats,
10  };
11}

The generator itself does not know how promises are resolved. It only describes the control flow.

Build a Minimal Generator Runner

A runner repeatedly calls next or throw based on Promise outcomes.

1function runGenerator(genFn, ...args) {
2  const iterator = genFn(...args);
3
4  return new Promise((resolve, reject) => {
5    function step(method, value) {
6      let result;
7      try {
8        result = iterator[method](value);
9      } catch (err) {
10        reject(err);
11        return;
12      }
13
14      const done = result.done;
15      const yielded = result.value;
16
17      if (done) {
18        resolve(yielded);
19        return;
20      }
21
22      Promise.resolve(yielded).then(
23        val => step("next", val),
24        err => step("throw", err)
25      );
26    }
27
28    step("next");
29  });
30}

This is the core idea used by libraries that predated native async and await syntax.

Add Error Handling and Retries

Since control is centralized in the runner pattern, it is easy to add retry wrappers around yielded operations.

1function retry(fn, attempts = 3, delayMs = 200) {
2  return new Promise((resolve, reject) => {
3    let count = 0;
4
5    function attempt() {
6      count += 1;
7      Promise.resolve()
8        .then(fn)
9        .then(resolve)
10        .catch(err => {
11          if (count >= attempts) {
12            reject(err);
13            return;
14          }
15          setTimeout(attempt, delayMs);
16        });
17    }
18
19    attempt();
20  });
21}
22
23function* resilientFlow(api) {
24  const user = yield retry(() => api.getUser(42), 3, 150);
25  const profile = yield retry(() => api.getProfile(user.id), 2, 100);
26  return profile;
27}

This pattern gives you composable resilience without deeply nested callbacks.

Compare with Async and Await

Async and await is easier to read for most applications and should be the default in modern runtimes. Generator-style async still has value when:

• You need to inspect or manipulate execution between each yield step.
• You want pluggable schedulers for testing.
• You maintain older code that already uses generator control flows.

If none of those apply, async and await usually reduces maintenance cost.

Testing Generator Flows

Generator-style async code is easiest to test when side effects are injected as dependencies. Pass an api object into the generator and mock each Promise-returning method in tests. You can then verify step order, retry behavior, and error propagation deterministically. For runner tests, include cases where yielded values are plain values, resolved Promises, and rejected Promises. Also test generator-thrown exceptions to confirm throw propagation works correctly. These tests provide confidence when refactoring legacy control flow into async and await while preserving behavior.

Common Pitfalls

A common pitfall is yielding non-Promise values unintentionally. Use Promise.resolve in the runner so plain values are handled consistently.

Another issue is losing stack context across asynchronous boundaries, especially in custom runners with incomplete error propagation.

Developers also forget cancellation concerns. Generator-style flow does not automatically cancel in-flight operations when callers stop waiting.

Finally, mixing generator-style async with callback-based APIs without wrappers leads to confusing control flow. Normalize async boundaries to Promises first.

Summary

• Generator-style async uses yield plus a Promise runner to model asynchronous steps.
• The runner controls sequencing, error propagation, and optional retry logic.
• Async and await is usually simpler, but generators remain useful in specialized scenarios.
• Normalize yielded values through Promise.resolve for consistency.
• Plan cancellation and error handling explicitly in custom runners.