2019-05-15 10:15:31 0 Comments Vue Boy.Lee

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