2 min read

Timeout requests in JavaScript

There are several ways

Share via

Posted by

Posted on

Updated on

Have you ever faced an issue that your webpage fails to finish a request due to backend crashing or it's too long to respond, and the app just waits for it - which seems to take forever.

In JavaScript, from ES6 and later*, there is a built-in method that we can use to implement the timeout feature very easily, called Promise.race. Let me show you how.

* JavaScript's Promise.race method is introduced in ECMAScript 2015 (ES6). This means any JavaScript engine that supports ES6 or later versions will have built-in support for Promise.race.

What is Promise.race?What is Promise.race?

Promise.race is a method provided by the Promise object in JavaScript. It takes an iterable of promises (like an array) as input and returns a new promise. This new promise settles (either resolves or rejects) as soon as one of the promises in the iterable settles.

Use Promise.race to implement timeout functionalityUse Promise.race to implement timeout functionality

First, create a function with the following code - name it timeout.

javascript


export const timeout = function (sec) {
    return new Promise(function (_, reject) {
        setTimeout(function () {
            reject(new Error('Request took too long!'));
        }, sec * 1000);
    });
};

The timeout function

This function should be put inside a file where you leave all the reusable functions, such as utils, helpers...

Second, in your async request, put your request call or any promise, async/await function and timeout function call inside an array in Promise.race, as follow:

javascript


const res = await Promise.race([
          axios.post(ENDPOINT_URL,  requestBody),
          timeout(20)
]);

In this example, the request will timeout after 20s

In this situation, Promise.race will return immediately after either the axios.post finishes its operation or the timeout occurs. This way, you can proactively control the timeout period for your request, ensuring it won't take too long to respond.

Client-side timeouts with JavaScript offer a way to control the responsiveness of your application by preventing requests from taking too long. This approach is independent of the server-side configuration for the original request. However, it's important to consider that the server might still be processing the request even after the client times out**.

** In this case, you may need other way to tackle this issue, such as server-side timeouts, or cancellation tokens - such as AbortController. See below for more examples with Axios.

Better ways with Axios/FetchBetter ways with Axios/Fetch

From Node.js 17.3+, you can use directly AbortSignal.timeout(millisecond) as a signal in the axios request. Like so:

javascript


axios.get('/foo/bar', {
   signal: AbortSignal.timeout(5000) //Aborts request after 5 seconds
}).then(function(response) {
   //...
});

Example of using AbortSignal.timeout with Axios. Source: Axios document.

Or a helper function with a setTimeout inside as a signal.

javascript


function newAbortSignal(timeoutMs) {
  const abortController = new AbortController();
  setTimeout(() => abortController.abort(), timeoutMs || 0);

  return abortController.signal;
}

axios.get('/foo/bar', {
   signal: newAbortSignal(5000) //Aborts request after 5 seconds
}).then(function(response) {
   //...
});

Example of using helper function as a signal in Axios. Source: Axios document.

Of course, these two approaches can work well with traditional fetch request, not just axios.

Hope this helps! Thanks for reading and let me know if you have any discussions.

Comments (0)

Share via

Posted by

TThức Trần

Posted on

Updated on