JavaScript fetch with Timeout

By  on  
The new AbortController and AbortSignal APIs have made canceling fetch requests much cleaner. To learn a more modern method of canceling a fetch request, please read fetch with Timeout!
The fetch API started out as a target for criticism because of lack of timeout and request cancelation.  While those criticisms could be argued as fair or not, you can't deny that the fetch API has been pretty awesome.  As we've always done, if a feature is missing, we can always shim it in. I've recently been thinking about shimming in a fetch timeout and found a good fetch / timeout script here.  I've slightly modified it to prevent the fetch call's then and catch callbacks from carrying out their tasks because I believe the timeout should be handled by the shim's Promise:
const FETCH_TIMEOUT = 5000;
let didTimeOut = false;

new Promise(function(resolve, reject) {
    const timeout = setTimeout(function() {
        didTimeOut = true;
        reject(new Error('Request timed out'));
    }, FETCH_TIMEOUT);
    
    fetch('https://davidwalsh.name/?xx1')
    .then(function(response) {
        // Clear the timeout as cleanup
        clearTimeout(timeout);
        if(!didTimeOut) {
            console.log('fetch good! ', response);
            resolve(response);
        }
    })
    .catch(function(err) {
        console.log('fetch failed! ', err);
        
        // Rejection already happened with setTimeout
        if(didTimeOut) return;
        // Reject with error
        reject(err);
    });
})
.then(function() {
    // Request success and no timeout
    console.log('good promise, no timeout! ');
})
.catch(function(err) {
    // Error: response error, request timeout or runtime error
    console.log('promise error! ', err);
});
Wrapping this code in a function called fetchWithTimeout, whereby you pass in a timeout and fetch URL/settings would work well; since people like to use fetch in a variety of ways, I've chosen not to create a generalized function and instead am just providing the basic logic. Many would argue that the timeout should come from the server but we all know us front-end devs don't always have control over both sides of a request.  If you're looking for a fetch request timeout snippet, here you go!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Parallax Sound Waves Animating on Scroll

    Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let's have a look how to create animating...

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

Discussion

  1. Drew

    The core problem with fetch when it comes to cancelation or timeout is baked into the underlying interface: Promises. Stateful, eager Promises just don’t model cancelation very well because the concept of a chain-able future value and potential side-effects of calling for and having that future value resolve/error are too tightly coupled.

    Newer apis seem to be adopting Promises as their model for async requests a bit too glibly, I think, not really understanding this structural problem. Modeling timeouts as errors might make sense in a lot of cases (though not all), but modeling cancelations as such is really problematic.

  2. Ransom

    After the first time resolve() or reject() is called, subsequent calls to resolve() or reject() do absolutely nothing. Therefore, you don’t need to check whether the timeout has completed in order to keep from calling reject() or resolve().

    Also, cancelling the timeout can be done more cleanly, using Promise.prototype.finally.

    With those two items in mind, here’s what the code would look like, wrapped in a function.

    function fetchWithTimeout( url, timeout ) {
        return new Promise( (resolve, reject) => {
            // Set timeout timer
            let timer = setTimeout(
                () => reject( new Error('Request timed out') ),
                timeout
            );
    
            fetch( url ).then(
                response => resolve( response ),
                err => reject( err )
            ).finally( () => clearTimeout(timer) );
        })
    }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!