VueJS Ajax Request Auto Cancelled via Axios
I got a very interesting issue, when I publish my new SPA project iProject online, the ajax request will auto cancelled by randon. It's the first time I face that thing, so I spent a little time to do the research.
{ 1. Check Nginx log }
in the log file, I saw 499 code, after search by google, I know the problem comes from client site.
{ 2. Compare SPA vs Postman }
I have the same test API list in Postman, so I just send the same request by Postman, everything ok, so I pretty sure the problem is on the Vuejs App.
{ 3. Check Axios Config }
All my request are send by Axios, so I guess something wrong with it, I got the follow in my code.
axios.create({
baseURL: ... ,
timeout: 1000, //1s, include sending time, only wait for 600-800ms
headers: { ... }
})
change it to 50000 / 100000
timeout: 1000, means will auto close connection in 1 sec, this is why cancelled after 600-800ms
{ 4. Fix It }
change the timeout to 20 sec(20000), I guess no user want wait more than 20 secs, so I set it to 20, if someday one ajax call need more then 20s, then I will get the concel again, but it's ok, I will be report as "Hey Lee this request is not good for user."
Of cause you can change it to 30 or 50 sec
Leave Comment