Abortable Promise
Problem statement
Implement makeAbortable(task). It wraps an async task and returns a promise plus an abort() method.
Task Shape
const { promise, abort } = makeAbortable((signal) => {
return fetch('/api/user', { signal });
});Requirements
- Create an
AbortControllerand pass itssignalto the task. abort()should abort the controller.- If aborted before completion, the returned promise should reject with an
AbortError. - Calling
abort()after the task is already settled should do nothing. - Support tasks that ignore the signal; the wrapper should still reject on abort.
Frontend interviews increasingly ask this because modern UIs cancel stale fetches, autocomplete requests, route loaders, and streamed responses.
Requirements & constraints
- Use platform `AbortController`.
- Reject with an error whose name is `AbortError`.
- Do not require the task to manually listen to the signal.
How to approach Abortable Promise
The strategy an interviewer expects you to reach for.
Abortable promises show up when a search box races itself: the user typed again, so the old fetch must die. Naive move Ignore cancellation and let every request finish, then apply whichever returns last. Where it breaks Stale responses overwrite newer UI. Tasks that ignore AbortSignal keep running unless you also race a reject-on-abort promise. The fix Pass an AbortSignal into signal-aware work. Race the task against a promise that rejects with AbortError when aborted — so even stubborn tasks cannot resolve after cancel. If already aborted, reject immediately. Remember: Signal for polite APIs + abort race for everything else. Say this in the interview: I'd pass an AbortSignal into the task and race it against an abort rejection so cancel always wins, even when the underlying work ignores the signal.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Runnable editor with the hidden test suite
- Progressive hints that unlock as you get stuck
- Senior-level reference solution with a line-by-line walkthrough
Already a member? Log in to open the workspace.