Checkpoint: Async Request Engine
Build the state machine behind an API-driven UI: a request engine with dedupe, an allSettled dashboard loader, and a timeout wrapper.
This checkpoint assembles the module's pieces into the engine an API-driven app actually runs on. No browser needed โ the logic is testable pure:
- Request engine โ a
createLoader(fetchFn)factory:load(key)returns a promise and caches the promise by key, so concurrent duplicate requests share one flight (dedupe), andreset()clears the cache. - Resilient dashboard โ
loadDashboard(tasks)that runs all sources withallSettledand returns{ loaded, failed }lists. - Timeout race โ
withTimeout(promise, ms, fallback)resolving the promise's value, orfallbackif it does not settle inms.
The shape you are building toward
Every data-driven interface reduces to this loop: event โ state โ render. The API supplies events (responses), your code maintains state (results, loading flag, error), and the DOM renders state. When a request is slow, the loading flag is your UI; when it fails, the error state is your UI; when the list is empty, that is a screen too.
The checkpoint asks you to wire the loop once more without the scaffold โ because the next time you meet it, it will be inside a framework, and the framework will not change what the loop is. It will only change where you write each part.