Select Page

fetch with Timeout

David Walsh
Published: January 16, 2023

A few years back I wrote a blog post about how write a fetch Promise that times out. The function was effective but the code wasn’t great, mostly because AbortController , which allows you to cancel a fetch Promise, did not yet exist. With AbortController and AbortSignal available, let’s create a better JavaScript function for fetching with a timeout:

Much like the original function, we’ll use setTimeout to time to the cancellation but we’ll use the signal with the fetch request:

async function fetchWithTimeout(url, opts = {}, timeout = 5000) {
  // Create the AbortController instance, get AbortSignal
  const abortController = new AbortController();
  const { signal } = abortController;
  // Make the fetch request
  const _fetchPromise = fetch(url, {
    ...opts,
    signal,
  });
  // Start the timer
  const timer = setTimeout(() => abortController.abort(), timeout);
  // Await the fetch with a catch in case it's aborted which signals an error
  try {
    const result = await _fetchPromise;
    clearTimeout(timer);
    return result;
  } catch (e) {
    clearTimeout(timer);
    throw e;
  }
};
// Usage
try {
  const impatientFetch = await fetchWithTimeout('/', {}, 2000);
}
catch(e) {
  console.log("fetch possibly canceled!", e);
}

The JavaScript code above is much cleaner now that we have a proper API to cancel fetch Promise calls. Attaching the signal to the fetch request allows us to use a setTimeout with abort to cancel the request after a given amount of time.

It’s been excellent seeing AbortController, AbortSignal, and fetch evolve to make async requests more controllable without drastically changing the API.

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla’s finally given web developers the platform that they need to create apps the way they’ve been creating them for years — with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving…

  • Tips for Starting with Bitcoin and Cryptocurrencies

    One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out…



Source: davidwalsh.name