Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get notified after axios timeout

I have an API call using axios. A timeout is set for 2500 millis. What I want is axios to return a value after the timeout so I can notify to the user the request is aborted due to some server or network error.

How I initialized the timeout

const instance = axios.create();
instance.defaults.timeout = 2500;

Below is the function that should return a value after the timeout

_post(url, body, token) {
        return new Promise((resolve, reject) => {
            instance
                .post(url, body, {headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }})
                .then(data => {
                    resolve(data);
                })
                .catch(error => {
                    reject(error);
                });
        });
    }

Thank you!

like image 396
sajithneyo Avatar asked May 31 '18 08:05

sajithneyo


People also ask

How do you handle Axios timeout?

In Axios, the default timeout is set to 0. However, Axios allows you to set a custom timeout when required. One way to add a timeout is to pass it to the config object. console.

What is timeout Axios?

What is timeout axios? 26, 2021.. Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.. Idle timeout is the amount of time the user or client remains inactive on the web application.

How does Axios allow cancellation request and request timeout?

If Axios has already sent the request, all cancel does is cause your Axios request to error out and ignore any response the server sends after cancellation.

What is http timeout error code?

The HyperText Transfer Protocol (HTTP) 504 Gateway Timeout server error response code indicates that the server, while acting as a gateway or proxy, did not get a response in time from the upstream server that it needed in order to complete the request.


2 Answers

Axios errors are identified by code property.

It's ECONNABORTED code in case of a timeout.

The code above uses promise construction antipattern. There's already a promise, no need to create a new one:

_post(url, body, token) {
    return instance
        .post(url, body, {headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }})
        .catch(error => {
            if (error.code === 'ECONNABORTED')
                return 'timeout';
            else
                throw error;
        });
}
like image 171
Estus Flask Avatar answered Oct 13 '22 16:10

Estus Flask


I know that this is an old post but I had the same problem and the following may help others

I could not get the codepen example above to run

In my case I put the timeout on the axios class rather than the instance

axios.defaults.timeout = 30000
axios.defaults.timeoutErrorMessage='timeout'

I suspect that the reason that you didn't get an error out of it was that you were still looking at e.response.data, in your error handler which presumably gets called at a higher level. On the error object e, e.response.data, does not exist in the case of a timeout so accessing this causes an error in your error handler - at least that is what happened in my case.

With the above I can just check for if(e.message == 'timeout') and then display a special error message

like image 3
Paul Avatar answered Oct 13 '22 16:10

Paul