Cancel Fetch Requests and Prevent Stale UI Updates with AbortController

Tue, 01 Sep 2026 00:00:00 +0700

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:

$el.innerText = 'Copy', 2000)" class="absolute top-2 right-2 bg-neutral-700 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity" > 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.

Fetch API on Nalar

Cancel Fetch Requests and Prevent Stale UI Updates with AbortController

The basic cancellation pattern