解决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。这样写之后就可以重新发起请求了。

 

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