How to Set Axios Timeout
New to Javascript/React/Node/Axios. Not New to Programming Having Issues Trying to Get Timeout on Axios Working in a Mobile React App. I Have a Node Server...
New to javascript/react/node/axios. Not new to programming
Having issues trying to get timeout on axios working in a mobile react app.
I have a node server with API end point set to test; this will accept the request, throw an error and simply not respond.
Eg: throw new Error(“testing for timeout”)
The app is hanging and will not move on until I stop the node server where immediately the catch block is executed.
I can verify that the app made contact with server by having the server do a console.log("hello") before throwing the error
I’ve created a new react app by new folder, “react-native init”, creating a button on app.js to initiate the call. Relevant code:
const axios = require('axios')
const test1Press = async () => {
console.log("test1 pressed")
// obviously not the actual url in this stackoverflow post
axios.defaults.baseURL = '
console.log("pre call")
try
{
await axios.post('/debug/throw', {timeout: 2000})
console.log("post call passed")
}
catch (err)
{
console.log("post call failed")
}
}
Console window shows Pre call; then hangs. When I stop node server the app logs immediately with "post call failed"
I have also tried:
axios.defaults.timeout = 2000
and using an axios instance like:
axinst = axios.create({
baseURL: '
timeout: 2000
})
console.log("pre call")
try
{
await axinst.post('/debug/throw')
console.log("post call passed")
}
catch (err)
{
console.log("post call failed")
}
I can’t see what I’m doing wrong.
EDIT:
On further research I found forum posts with similar issues; looks like axios timeout may not be reliable as of May 2020; and a year later now in June 2021 ?
Suggested solutions are canceltokens eg:
const source = CancelToken.source();
try {
let response = null;
setTimeout(() => {
if (response === null) {
source.cancel();
}
}, 2000);
response = await axios.post('/url',null,
{cancelToken: source.token});
// success
} catch (error) {
// fail
}
Tested this and working
2 Answers
With await axios.post('/debug/throw', {timeout: 2000}), actually you send the payload {timeout: 2000} to the server, not set the timeout to 2 seconds. See an example here.
I tested with another syntax of axios and it worked
const test1Press = async () => {
console.log("test1 pressed")
// obviously not the actual url in this stackoverflow post
axios.defaults.baseURL = '
console.log("pre call")
console.log(new Date().toUTCString());
try {
await axios({
method: 'post',
url: '/',
timeout: 2000 // only wait for 2s
})
console.log(new Date().toUTCString());
console.log("post call passed")
}
catch (err) {
console.log(new Date().toUTCString());
console.log("post call failed")
}
}
test1Press();
On the server-side, I wait for 5 seconds to have the timeout error on the client-side
const http = require('http');
const server = http.createServer(function (req, res) {
setTimeout(function () {
res.write('Hello World!');
res.end();
}, 5 * 1 * 1000); // after 5s
})
.listen(9000);
Running the code above gives me the timeout error after 2 seconds
test1 pressed
pre call
Mon, 28 Jun 2021 09:01:54 GMT
Mon, 28 Jun 2021 09:01:56 GMT
post call failed
EDIT I tested to create the instance of axios, this gives me the same result:
const test1Press = async () => {
console.log("test1 pressed")
// obviously not the actual url in this stackoverflow post
const instance = axios.create({
baseURL: '
timeout: 2000,
});
console.log("pre call")
console.log(new Date().toUTCString());
try {
await instance.post('/');
console.log(new Date().toUTCString());
console.log("post call passed")
}
catch (err) {
console.log(new Date().toUTCString());
console.log("post call failed")
}
}
test1Press();
Let's say you've requested the URL through axios and server is taking long time to respond, in this case the axios timeout will work.
But you don't have internet connection or the IP address or domain name that you're requesting not there, in this case axios timeout will not work.
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
