解决vue中axios使用AbortController取消的请求无法重新启动

需求:有个项目需要使用长连接。前端发起请求,如果有新消息就马上返回数据,如果没有就等待(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。这样写之后就可以重新发起请求了。

解决vue中axios使用AbortController取消的请求无法重新启动_第1张图片

 

我最开始写的时候是放到data外面了,直接const controller = new AbortController(); 就出现问题了。看来在vue中要稍微改变一下。

你可能感兴趣的:(web前端,http)