需求:有个项目需要使用长连接。前端发起请求,如果有新消息就马上返回数据,如果没有就等待(20s)至超时,重新发起请求。
问题:当前页面发起的请求,因为是长连接,当切换到其他页面该连接还在等待,然后继续请求,无法马上结束。
解决:这个时候就需要用到axios的AbortController来结束请求。
官方示例:
const controller = new AbortController();
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// cancel the request
controller.abort()
新问题:直接用官方的这个方法,在切换页面的时候在当前页面周期beforeDestroy里面执行一下关闭,就关闭了这个长连接。但是出现了新的问题,就是重新进入这个页面的时候无法重新发起请求了。
解决:后来略作小改动,解决了:
data() {
return {
...
controller: new AbortController(),
};
},
将controller放到data里面去定义,下面使用的时候用this.controller。这样写之后就可以重新发起请求了。
我最开始写的时候是放到data外面了,直接const controller = new AbortController(); 就出现问题了。看来在vue中要稍微改变一下。