for-await-of in JavaScript: Iterate Over Async Sources

Iterating over Promises sequentially

const urls = ["/api/a", "/api/b", "/api/c"];

for await (const url of urls.map(u => fetch(u))) {
  console.log(url.status);
}

for-await-of walks an iterable of Promises and awaits each one in order. If you need sequence (e.g. each fetch depends on a previous redirect), this is cleaner than for + await.

Reading a stream of chunks

The real superpower: any object with an async iterator works. ReadableStreams expose one:

const r = await fetch("/api/long-text");
const reader = r.body.pipeThrough(new TextDecoderStream());

for await (const chunk of reader) {
  console.log("chunk:", chunk.slice(0, 50));
}

That's how you stream an OpenAI / Anthropic response token-by-token in the browser. fetch gives you a ReadableStream; you pipe through TextDecoderStream to get strings; for-await-of reads chunks as they arrive.

Building your own async iterator

async function* range(start, end) {
  for (let i = start; i < end; i += 1) {
    await new Promise(r => setTimeout(r, 100));   // simulate async work
    yield i;
  }
}

for await (const n of range(1, 4)) {
  console.log(n);   // 1, then 2 (100ms later), then 3
}

async function* is the syntax. yield produces values, await pauses between them.