How to cancel an HTTP fetch request

JavaScript promises have been a huge catalyst for asynchronous coding in the language. They have vastly improved the performance and experience for web development. One shortcoming of native promises has been that we were not able to cancel an HTTP fetch request once it was initiated. But now there is a way to do so.

A new controller known as AbortController has been added to the DOM Standard that allows us to use it as a signal to cancel an HTTP fetch request. It makes use of an AbortSignal property to do so.

- Advertisement -

It was added in 2017 and is supported in most of the browsers (except IE, obviously). But now that IE support is ending soon, it might be that big of a deal.

Why do we need to cancel an HTTP fetch request?

Before we get into the how-to part, let us first see why we would need to cancel an HTTP fetch request.

When we have an application that is composed of multiple components that can be dynamically added and removed to the DOM tree, many of the components are bound to make HTTP requests. And it might so happen that one of these components gets unmounted before the fetch request is completed. This could be fairly common in slow network conditions or if the user jumps is jumping around pages.

Because the fetch request is asynchronous, it will keep executing in the background and this might lead to some bugs when it gets completed, if not handled properly.

The default fetch timeout is 300 seconds for Chrome and 90 seconds for Firefox. These are way more than what a user would want to wait in case of unreliable network conditions. Therefore we definitely would want to implement our own way to cancel an HTTP fetch request, if needed.

AbortController and AbortSignal

The AbortController and AbortSignal API are provided by the DOM standard, and have been kept generic so that they can be used by other web standards. To declare a controller:

const controller = new AbortController();

and for the signal:

const signal = controller.signal;

The controller only has one abort method. And when that is invoked, the signal gets notified.

signal.addEventListener('abort', () => {
  console.log(signal.aborted); // true

How to abort an HTTP fetch request?

The fetch API itself does not allow programmatic cancellation of requests. But it can take in AbortSignal as a parameter. And then we can abort the fetch request after a specific time duration if we wanted to.

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .catch(err => {
    if ( === 'AbortError') {
      console.log('Fetch was aborted');

// Abort the request after 4s
// aborts the fetch with 'AbortError'
setTimeout(() => {
}, 4000);

We can even create our own wrapper of a fetch with timeout call if we wanted to:

async function cancellableFetch(url, data, timeout = 4000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);

  const response = await fetch(url, {,
    signal: controller.signal  

  return response;

A few things to note:

  • If you pass in the same signal to multiple fetch calls, it cancels all requests with that signal on abort. So we can use it if there are multiple requests that need to be aborted if one fails.
  • Since controllers are not reusable, if we do not want to abort all fetches when we cancel an HTTP fetch request, we need to create a new instance of the controller to all of them.
  • The request gets aborted only at the client end. The server might still process it though the client will not receive the response.
  • We could have used Promise.race to achieve this functionality as well but that solution would have left the request hanging instead of aborting the request. It would have continued to consume bandwidth in the background.

And that is how you can cancel an HTTP fetch request after a timeout, or abort it programmatically. I am excited about being able to do so and hope you are too. Let me know in the comments section if you plan on using this.

Recent Articles

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.