JavaScript Async Generators: Complete Tutorial

async function* countAsync(limit) {
  for (let i = 0; i < limit; i++) {
    // Simulate async work
    await new Promise((resolve) => setTimeout(resolve, 100));
    yield i;
  }
}
 
// Consume with for-await-of
for await (const value of countAsync(5)) {
  console.log(value); // 0, 1, 2, 3, 4 (each 100ms apart)
}

const gen = countAsync(3);
 
const first = await gen.next();   // { value: 0, done: false }
const second = await gen.next();  // { value: 1, done: false }
const third = await gen.next();   // { value: 2, done: false }
const end = await gen.next();     // { value: undefined, done: true }

async function* fetchPages(baseUrl, pageSize = 20) {
  let page = 1;
  let hasMore = true;
 
  while (hasMore) {
    const response = await fetch(`${baseUrl}?page=${page}&limit=${pageSize}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
    const data = await response.json();
 
    for (const item of data.items) {
      yield item;
    }
 
    hasMore = data.items.length === pageSize;
    page++;
  }
}
 
// Consume: processes items one at a time across all pages
for await (const user of fetchPages("/api/users", 50)) {
  console.log(user.name);
 
  // Stop early if needed
  if (user.name === "target") break;
}

async function* serverSentEvents(url) {
  const response = await fetch(url);
  const reader = response.body
    .pipeThrough(new TextDecoderStream())
    .getReader();
 
  let buffer = "";
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
 
    buffer += value;
    const lines = buffer.split("\n\n");
    buffer = lines.pop() || "";
 
    for (const block of lines) {
      const dataLine = block.split("\n").find((l) => l.startsWith("data: "));
      if (dataLine) {
        yield JSON.parse(dataLine.slice(6));
      }
    }
  }
}
 
// Usage
for await (const event of serverSentEvents("/api/stream")) {
  console.log("Event:", event);
  updateUI(event);
}

async function* interval(ms) {
  let count = 0;
 
  while (true) {
    await new Promise((resolve) => setTimeout(resolve, ms));
    yield count++;
  }
}
 
// Tick every second, stop after 10
for await (const tick of interval(1000)) {
  console.log(`Tick ${tick}`);
  if (tick >= 9) break;
}

async function* fetchWithAbort(url, signal) {
  const response = await fetch(url, { signal });
  const reader = response.body.getReader();
 
  try {
    while (true) {
      if (signal?.aborted) return;
 
      const { done, value } = await reader.read();
      if (done) break;
      yield value;
    }
  } finally {
    reader.releaseLock();
  }
}
 
// Usage
const controller = new AbortController();
 
setTimeout(() => controller.abort(), 5000); // Cancel after 5s
 
try {
  for await (const chunk of fetchWithAbort("/api/large-data", controller.signal)) {
    process(chunk);
  }
} catch (error) {
  if (error.name === "AbortError") {
    console.log("Stream canceled");
  }
}

async function* asyncMap(source, fn) {
  for await (const item of source) {
    yield await fn(item);
  }
}

async function* asyncFilter(source, predicate) {
  for await (const item of source) {
    if (await predicate(item)) {
      yield item;
    }
  }
}

async function* asyncTake(source, count) {
  let taken = 0;
  for await (const item of source) {
    yield item;
    if (++taken >= count) return;
  }
}

const pipeline = asyncTake(
  asyncFilter(
    asyncMap(
      fetchPages("/api/articles"),
      async (article) => ({
        ...article,
        wordCount: article.content.split(" ").length,
      })
    ),
    async (article) => article.wordCount > 500
  ),
  10
);
 
// Get first 10 articles with >500 words across all pages
const results = [];
for await (const article of pipeline) {
  results.push(article);
}

async function* asyncBatch(source, batchSize) {
  let batch = [];
 
  for await (const item of source) {
    batch.push(item);
 
    if (batch.length >= batchSize) {
      yield batch;
      batch = [];
    }
  }
 
  if (batch.length > 0) {
    yield batch;
  }
}
 
// Process users in batches of 100
for await (const batch of asyncBatch(fetchPages("/api/users"), 100)) {
  await bulkInsert(batch);
  console.log(`Inserted batch of ${batch.length} users`);
}

async function* resilientFetch(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      yield await response.json();
    } catch (error) {
      yield { error: error.message, url };
    }
  }
}
 
for await (const result of resilientFetch(endpoints)) {
  if (result.error) {
    console.warn(`Failed: ${result.url} - ${result.error}`);
  } else {
    processData(result);
  }
}