Checkpoint: Browser APIs

Reviewed & published by Brayan K

This checkpoint consolidates the async and browser-API skills you have built — promise combinators, async iterators, cancellation, workers, observers, storage, and canvas — into one recap, a real build challenge, and a quick quiz.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

If you can finish the challenge and answer the quiz, you are ready to ship features that fetch, stream, cache, and render real data.

What You'll Do in This Checkpoint

• Recap every browser-API lesson
• Combine combinators + generators + cache
• Build a resilient data pipeline
• Compare a starter to a full solution
• Test your recall with a quiz
• Confirm you're ready for the final project

What You've Learned

Here is the whole stretch in one place. Skim it; anything that feels fuzzy is worth a quick revisit.

🛠️ Build Challenge — A Resilient Data Pipeline

Tie three skills together into one pipeline that real apps actually need:

• Fan-out fetch a batch of pages in parallel with Promise.allSettled, so one broken page does not sink the rest.
• Stream the items from the successful pages through an async generator paginator.
• Back it with a Map cache so a second pass refetches nothing.

The starter below already runs end to end against a fake paged API (page 2 fails on purpose). Read it, run it, then try extending it — for example add a real cachedFetch that consults the cache before hitting the network, then compare with the full solution.

// A fake paged API (stands in for fetch). Page 2 fails on purpose.
const DB = new Map([
  [1, { items: ["alpha", "beta"], next: 2 }],
  [2, { items: ["gamma"], next: 3 }],
  [3, { items: ["delta", "epsilon"], next: null }],
]);
const fetchPage = (page) =>
  new Promise((resolve, reject) =>
    setTimeout(() => {
      if (page === 2) return reject(new Error("page 2 down"));
      resolve(DB.get(page));
    }, 5)
  );

const cache = new Map();

// STEP 1 — fan out with Promise.allSettled and count failures
async function fetchBatch(pages) {
  const settled = await Promise.allSettled(pages.map(fetchPage));
  const ok = [];
  let failures = 0;
  for (let i = 0; i < settled.length; i++) {
    const r = settled[i];
    if (r.status === "fulfilled") {
      cache.set(pages[i], r.value); // STEP 3 — cache the good ones
      ok.push(r.value);
    } else {
      failures++;
    }
  }
  return { ok, failures };
}

// STEP 2 — async generator: stream items from the good pages
async function* streamItems(pages) {
  const { ok, failures } = await fetchBatch(pages);
  console.log("failures:", failures);
  for (const data of ok) {
    for (const item of data.items) yield item;
  }
}

async function main() {
  const out = [];
  for await (const item of streamItems([1, 2, 3])) out.push(item);
  console.log("items:", out);
  console.log("cached pages:", [...cache.keys()].sort());
}

main();
// ✅ Expected output:
// failures: 1
// items: [ 'alpha', 'beta', 'delta', 'epsilon' ]
// cached pages: [ 1, 3 ]

📝 Checkpoint Quiz

Answer each one in your head first, then expand to check. Aim to explain the why.

Promise.allSettled. It never rejects and returns a result object per promise, so you keep the successes and can count the failures.

for await (const x of gen()), and it must live inside an async function. A plain for-of throws on an async iterable.

Its promise rejects with a DOMException named "AbortError". Check err.name so you can ignore deliberate cancellations.

Messages are copied with the structured clone algorithm, which cannot clone functions or DOM nodes — it throws a DataCloneError. Send plain data only.

rootMargin (e.g. "200px 0px") on an IntersectionObserver. It expands the viewport box so elements count as visible early.

Stores are created only inside onupgradeneeded. The API uses request/event objects (onsuccess/onerror), so people wrap each request in a Promise to use async/await.

Quick Reference — One Line Each

📚 Keep Learning

• • MDN — Web APIs index
• • MDN — Using promises
• • MDN — Progressive Web Apps (where these combine)

🎉 Checkpoint Complete — Browser APIs!

• ✅ Recapped combinators, async iterators, AbortController, workers, observers, IndexedDB, and canvas
• ✅ Built a resilient pipeline: fan-out fetch + async generator + cache
• ✅ Reviewed the full solution and tested your recall with the quiz
• ✅ You can now fetch, stream, cancel, cache, and render real data

Practice quiz

Continue this course

• Previous: The Canvas API
• Next: Final Project Ideas — Guided project ideas to consolidate everything you've learned
• Quick reference: JavaScript cheat sheet

Frequently asked questions

What does this checkpoint cover?

Everything from the async-and-browser-APIs stretch of the course: Promise combinators (all, allSettled, race, any), async iterators with for-await-of, AbortController for cancellation, Web Workers for background threads, IntersectionObserver and MutationObserver, IndexedDB for client-side storage, and the Canvas API for drawing. The build challenge combines several of them into one realistic data pipeline.

Which of these APIs only exist in the browser?

Worker, IntersectionObserver, MutationObserver, IndexedDB, and Canvas all require a browser environment. Promise combinators, async iterators/generators, and AbortController are pure JavaScript and run anywhere, including Node. That is why the runnable demos in this course model the browser-only APIs with plain-JS equivalents that share the same shape.

How should I use the checkpoint quiz?

Try to answer each question out loud before expanding it. If you can explain why — not just pick the right word — you have truly learned it. Anything you miss points you straight back to the lesson worth re-reading. The goal is recall and understanding, not just recognition.

Related lessons

• Promise combinators
• Async iterators
• AbortController
• Web Workers
• IntersectionObserver
• MutationObserver
• IndexedDB