Why this matters
The production reason.
Search boxes, filters, and tabs can fire several requests quickly. Without cancellation, an older response can arrive last and overwrite newer UI.
AbortController lets you tell the browser that the previous request no longer matters.
This keeps fast interfaces honest: the rendered result matches the latest user intent, not whichever network request finished last.
Copy-ready example
let activeController;
async function loadResults(query) {
activeController?.abort();
activeController = new AbortController();
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
signal: activeController.signal,
});
return response.json();
}