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

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 甚至更高