Cancel Fetch Requests and Prevent Stale UI Updates with AbortController
Fast user interfaces frequently start requests that become irrelevant before they finish. A search box may issue a request for ca, then cat, then catalog. If the oldest request finishes last, it can overwrite the newest results.
AbortController gives JavaScript a standard way to cancel Fetch requests and other APIs that accept an AbortSignal.
The basic cancellation pattern Create a controller and pass its signal to fetch:
Copy const controller = new AbortController(); const request = fetch('/api/profile', { signal: controller.signal, }); controller.abort(); Once aborted, the fetch promise rejects. Cancellation is therefore part of normal control flow and should be handled deliberately.