VueJS通过Axios发送的移步请求自动取消
当我部署我新开发的SPA程序iProject的时候,我拿到了一个非常有意思的bug, ajax请求会随机的自动取消, 我花了一些时间去研究这个错误的问题在哪里,在这里记录一下,方便后来人
{ 1. 查看 Nginx Log }
在log文件中,我找到了499错误码,通过google查找,我知道问题出在客户端.
{ 2. 对比 SPA 和 Postman 发送的请求}
我有一套完整的API请求在Postman里,所以我直接用Postman发送了相同的请求,一切看起来都没问题。所以我可以确定问题出在Vuejs SPA App上.
{ 3. 查看 Axios 配置 }
因为所有的请求都是通过Axios发送的,所以我猜测问题在Axios的配置上,以下是配置代码
axios.create({
baseURL: ... ,
timeout: 1000, //1s, include sending time, only wait for 600-800ms
headers: { ... }
})
timeout: 1000, 代表请求最长不超过1s, 这也就是为什么在600-800ms的时候自动关闭请求
{ 4. Fix It }
把timeout改到20s(20000), 我想没有用户愿意等超过20s的时间,所以我设置了这么一个值,如果有一天出现了超过20s的请求,我会继续收到cencel,但这并不会成为问题,因为这等于向我预警 "Hey Lee 这个请求对用户不太友好."
当然你也可以把它改到30或者50 甚至更高
留言