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, {

  // 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 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.

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!
  • Write Simple, Elegant and Maintainable Media Queries with Sass
  • jQuery Countdown Plugin

    You’ve got most likely been to websites like RapidShare and MegaUpload that help you obtain information however make you wait a specified variety of seconds earlier than supplying you with the obtain hyperlink. I’ve created an identical script however my script lets you animate the CSS font-size…

  • Prevent Page Zooming in Mobile Browsers

    Ever since I bought my iPhone, I have been extra agreeable in going locations that my fiancee desires to go. It is not as a result of I’ve any curiosity in trying out ladies’s sneakers, flowers, or that kind of stuff — it is as a result of my iPhone lets…


Leave a Reply

Your email address will not be published.