How to Cancel a Fetch Request

By  on  

JavaScript promises have always been a major win for the language -- they've led to a revolution of asynchronous coding that has vastly improved performance on the web. One shortcoming of native promises is that there's no true way to cancel a fetch...until now. A new AbortController has been added to the JavaScript specification that will allow developers to use a signal to abort one or multiple fetch calls.

Here's the flow of how canceling a fetch call works:

  • Create an AbortController instance
  • That instance has a signal property
  • Pass the signal as a fetch option for signal
  • Call the AbortController's abort property to cancel all fetches that use that signal.

Aborting a Fetch

The following is the bare bones of canceling a fetch request:

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

// Abort request
controller.abort();

An AbortError occurs upon the abort call, so you can listen for aborted fetches in the catch by comparing the error name:

}).catch(e => {
    if(e.name === "AbortError") {
        // We know it's been canceled!
    }
});

Passing the same signal to multiple fetch calls will cancel all requests with that signal:

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 2 is complete!`);
}).catch(e => {
    console.warn(`Fetch 2 error: ${e.message}`);
});

// Wait 2 seconds to abort both requests
setTimeout(() => controller.abort(), 2000);

In his article Abortable fetch, Jake Archibald details a nice utility for creating abortable fetches without the need for all of the boilerplate:

function abortableFetch(request, opts) {
  const controller = new AbortController();
  const signal = controller.signal;

  return {
    abort: () => controller.abort(),
    ready: fetch(request, { ...opts, signal })
  };
}

If I'm completely honest, I'm not super excited about the method for canceling fetches. In an ideal world, a basic .cancel() on the Promise returned by a fetch would be cool, but there are issues that would come with that too. In any event, I'm jazzed about being able to cancel fetch calls and you should be too!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

  • By
    CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

Discussion

  1. Fred

    I would love to know what happens under the hood: is the cancellation handled only locally, does it involve some action toward the server?

    I tried to cancel a request a while ago and decided it was easier to ignore the response when it arrives.

    • skyboyer

      connection is closed and that’s it. Server may handle that case in the middle of processing request or may go till the very end to realize response it’s not needed anymore. It’s up to backend-side implementation.

  2. Pepe Julian Onziema

    So jazzed right now. Thanks David!

  3. Next article: “How to Show Upload Progress with the Fetch API”.

  4. This is exactly what I was looking for. I’m currently trying to upgrade some old jQuery code (specifically $.ajax()) and was looking for how to cancel the call the way I could with jQuery. Hopefully it’s supported everywhere fetch() is supported. To be honest, I’m used to having to think about this. Using ES5+jQuery for _so long_, compatibility was rarely ever an issue.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!