Paginated fetch with async generator
The canonical async generator use case
You're consuming an API that returns paginated results: { items: [...], next: "<token>" }. Without async generators, this is a manual recursion + state mess. With them, it's a clean for-await loop.
async function* fetchAllItems() {
let page = "1";
while (page) {
const r = await fetch(\`/api/items?page=${page}\`);
const { items, next } = await r.json();
for (const item of items) yield item;
page = next;
}
}
for await (const item of fetchAllItems()) {
console.log(item); // each item, one at a time, across pages
}The generator stops yielding when the API returns next: null. The consumer doesn't know or care how many pages there were.
Why this beats Promise.all
Promise.all loads ALL pages in parallel β you can't even start until you know how many there are. Async generators stream pages on demand. The first item is available after one request, not all.
Backpressure for free
If the consumer breaks out of the loop early, no more pages are requested. Sequential, lazy, cancellable β exactly the shape pagination wants.
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.