Tip: Abort a fetch request in JavaScript

Angelos Chalaris · JavaScript, Function · May 15, 2022

The Fetch API is nowadays the de facto way to send asynchronous requests in JavaScript. This is in part due to the fact that the fetch() method accepts a multitude of useful options. One of these is the signal option, which can be used to abort a request. To create a valid value for this option, you can use AbortController.signal after creating a new instance of AbortController. Then, you can use AbortController.abort() to cancel the request at any time.

// Create the AbortController
const controller = new AbortController();
const { signal } = controller;

// Perform the request
fetch('https://my.site.com/data', { signal }).then(res => console.log(res));

// Abort the request
controller.abort();

This is particularly useful in scenarios where a request takes too long or the response is no longer needed. You can see a common React use-case for this in the useFetch hook.

Recommended snippets

  • Messing up the order of chained then and catch methods in JavaScript promises can result in all sorts of problems. Here's a short primer on the subject.

  • Pipe async functions

    JavaScript, Function

    Performs left-to-right function composition for asynchronous functions.

  • Converge branching functions

    JavaScript, Function

    Converges a list of branching functions into a single function and returns the result.