Abort Controller Timeout - JavaScript Client

AbortController creates a signal that can cancel a slow fetch and route the UI into a timeout state.

Program

Network requests can be too slow. AbortController gives client code a cancellation signal that fetch understands.

abort_controller_timeout.html

Visuals: captured from real browser rendering

<output id="status">Loading report</output>
<script>
  const statusEl = document.querySelector("#status");
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 2000);
  fetch("/api/report", { signal: controller.signal })
    .then(() => statusEl.textContent = "Report loaded")
    .catch(error => statusEl.textContent = error.name === "AbortError" ? "Timed out" : "Failed")
    .finally(() => clearTimeout(timeoutId));
</script>

Create a cancellation controller.
The controller owns the signal that fetch can observe.
Schedule the timeout.
A timer will abort the request if it takes too long.
Pass the signal into fetch.
fetch now listens for the abort signal.
Render the timeout state.
The catch handler recognizes AbortError and shows a timeout message.
Clear the timer after completion.
finally runs cleanup after success or failure.

AbortController AbortController creates a signal used to cancel async work.

finally A Promise finally handler runs after success or failure for cleanup.