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

最新推荐文章于 2025-09-18 19:15:50 发布

原创最新推荐文章于 2025-09-18 19:15:50 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#http

web前端专栏收录该内容

17 篇文章

订阅专栏

文章讲述了在Vue项目中遇到的问题，即前端使用长连接时，在切换页面后无法正确关闭和重新发起请求。通过引入AbortController解决长连接的取消和重新发起问题，将控制器实例化放在data里，以便在页面生命周期中正确管理请求。

需求：有个项目需要使用长连接。前端发起请求，如果有新消息就马上返回数据，如果没有就等待（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中要稍微改变一下。