A couple 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, {
...opts,
sign,
});
// Begin the timer
const timer = setTimeout(() => abortController.abort(), timeout);
// Await the fetch with a catch in case it is aborted which alerts an error
attempt {
const end result = await _fetchPromise;
clearTimeout(timer);
return end result;
} catch (e) {
clearTimeout(timer);
throw e;
}
};
// Utilization
attempt {
const impatientFetch = await fetchWithTimeout('/', {}, 2000);
}
catch(e) {
console.log("fetch presumably canceled!", e);
}
The JavaScript code above is way cleaner now that we’ve got 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.
Source_link
