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 out there, 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, {
    ...opts,
    sign,
  });

  // 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;
    clearTimeout(timer);
    return outcome;
  } catch (e) {
    clearTimeout(timer);
    throw e;
  }
};

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

The JavaScript code above is way cleaner now that we have now 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 wonderful seeing AbortController, AbortSignal, and fetch evolve to make async requests extra controllable with out drastically altering the API.