An AbortController exposes a .signal you pass into any abort-aware async API and an .abort() method that flips the signal. When abort() fires, fetch (or your fake fetch) rejects with a DOMException whose name is 'AbortError', which lets callers tell user-cancelled work apart from real failures. Always store the controller alongside the request so a follow-up handler can reach it (route change, search input, component unmount). Once aborted, a controller cannot be reused; create a fresh one per request.

Pairing a fresh AbortController with a setTimeout gives you a per-request deadline without manually plumbing a timer across the codebase. The finally block clears the pending timer so a fast successful response does not leave a dangling timeout in the event loop. Callers see an AbortError either way (timeout or manual cancel), so build your error UI around the error name, not the trigger. For user-facing forms, surface a friendlier message when the cancel was a real timeout vs a navigation.

Search-as-you-type only cares about the most recent query, so each new keystroke should abort the previous request before starting the next one. Tracking the in-flight controller in a closure makes that bookkeeping local instead of leaking through component state. The if (inflight === ac) return res guard discards a result that finished after a newer request started but before the abort propagated. Swallowing 'AbortError' keeps the UI clean since cancelling is expected behavior, not a real failure to surface.