Monday, February 6, 2023
HomeSoftware Developmentfetch with Timeout

fetch with Timeout

A number of years again I wrote a weblog publish about how write a fetch Promise that occasions out. The operate was efficient however the code wasn’t nice, principally as a result of AbortController , which lets you cancel a fetch Promise, didn’t but exist. With AbortController and AbortSignal accessible, let’s create a greater JavaScript operate for fetching with a timeout:

Very like the unique operate, we’ll use setTimeout to time to the cancellation however we’ll use the sign with the fetch request:

async operate fetchWithTimeout(url, opts = {}, timeout = 5000) {
  // Create the AbortController occasion, get AbortSignal
  const abortController = new AbortController();
  const { sign } = abortController;

  // Make the fetch request
  const _fetchPromise = fetch(url, {

  // Begin the timer
  const timer = setTimeout(() => abortController.abort(), timeout);

  // Await the fetch with a catch in case it is aborted which indicators an error
  strive {
    const outcome = await _fetchPromise;
    return outcome;
  } catch (e) {
    throw e;

// Utilization
strive {
  const impatientFetch = await fetchWithTimeout('/', {}, 2000);
catch(e) {
  console.log("fetch probably canceled!", e);

The JavaScript code above is far cleaner now that we now have a correct API to cancel fetch Promise calls. Attaching the sign to the fetch request permits us to make use of a setTimeout with abort to cancel the request after a given period of time.

It has been glorious seeing AbortController, AbortSignal, and fetch evolve to make async requests extra controllable with out drastically altering the API.

  • 9 Mind-Blowing WebGL Demos

    As a lot as builders now detest Flash, we’re nonetheless taking part in a little bit of catch as much as natively duplicate the animation capabilities that Adobe’s previous know-how offered us.  In fact we now have canvas, an superior know-how, one which I highlighted 9 mind-blowing demos.  One other know-how accessible…

  • JavaScript Promise API

    Whereas synchronous code is simpler to observe and debug, async is mostly higher for efficiency and adaptability. Why “maintain up the present” when you’ll be able to set off quite a few requests directly after which deal with them when every is prepared?  Guarantees are changing into an enormous a part of the JavaScript world…

  • MooTools Kwicks Plugin
  • Skype-Style Buttons Using MooTools



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments