A search box sends one request for “rail” and another for “railway.” If the older response arrives last, it can overwrite the newer suggestions. Cancelling work that no longer belongs to the interface is one job for AbortController.
MDN’s abort() documentation describes cancelling asynchronous operations including fetch requests and response-body consumption. The controller supplies a signal to the operation; calling abort changes that signal’s state.
Give a new operation a fresh signal
Create a controller for the request you intend to cancel and pass its signal through the fetch options. Keep a reference so the component or caller can abort that particular operation when it becomes obsolete.
An aborted signal is not reset for a later request. Reusing it can cause the next operation to reject immediately. This makes ownership important: a controller kept too broadly can accidentally cancel unrelated work, while one hidden too deeply cannot be cancelled when the screen changes.
Handle the lifecycle, including the response body
Do not assume the operation is fully finished merely because response headers arrived. Reading a response body can still be interrupted. Handle the rejected promise at the point where your code awaits the operation, and distinguish an expected cancellation from a network or application failure.
For a search interface, an obsolete request normally should not display an alarming error banner. A genuine failure of the current request still needs an appropriate message. Use the platform’s documented error and signal behaviour rather than swallowing every exception as though it were cancellation.
In a controlled test, type a second query before the first response returns, then verify that only results belonging to the current query appear. Also leave the component while a request is pending and check that cleanup does not update a discarded view.
Cancellation has a boundary. If a request changes server data, aborting the client’s wait does not prove the server stopped or undid the change. That needs a separately designed server-side contract.
Use AbortController to manage the lifetime of client work, and keep the identity of the current operation explicit. The result is a calmer interface that does not confuse an old response with the user’s latest intention.