如何在Vue.js中使用Axios取消之前的请求？

刚好用Axios在Vue项目里处理过请求取消的需求，给你分享两种官方支持的方案，你可以根据自己的Axios版本来选：

这是Axios早期的取消方案，虽然现在有更标准的替代，但老项目里还是常用。

在Vue组件里可以这么实现：

1. 先在组件的data里定义CancelToken的source实例
2. 发起请求时把cancelToken配置到请求参数里
3. 需要取消时调用source.cancel()方法，还可以传取消原因

举个实际的例子，比如搜索框输入时取消之前的请求：

<template>
  <input v-model="searchKeyword" @input="handleSearch" placeholder="输入搜索关键词" />
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchKeyword: '',
      cancelSource: null // 存储CancelToken实例
    }
  },
  methods: {
    handleSearch() {
      // 先取消之前未完成的请求
      if (this.cancelSource) {
        this.cancelSource.cancel('用户发起新搜索，取消之前的请求')
      }
      
      // 创建新的CancelToken实例
      this.cancelSource = axios.CancelToken.source()
      
      // 发起请求
      axios.get('/api/search', {
        params: { keyword: this.searchKeyword },
        cancelToken: this.cancelSource.token
      }).then(res => {
        console.log('搜索结果:', res.data)
      }).catch(err => {
        // 捕获取消请求的错误，避免控制台报错
        if (axios.isCancel(err)) {
          console.log('请求已取消:', err.message)
        } else {
          // 处理其他错误
          console.error('请求出错:', err)
        }
      })
    }
  },
  beforeDestroy() {
    // 组件销毁前取消未完成的请求
    if (this.cancelSource) {
      this.cancelSource.cancel('组件已销毁，取消请求')
    }
  }
}
</script>

这是W3C标准的API，现在Axios已经支持，比CancelToken更通用，推荐新项目用。

实现逻辑和CancelToken类似，只是API不同：

1. 创建AbortController实例
2. 请求时把signal配置到请求参数里
3. 取消时调用controller.abort()

同样用搜索场景举例：

<template>
  <input v-model="searchKeyword" @input="handleSearch" placeholder="输入搜索关键词" />
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchKeyword: '',
      abortController: null // 存储AbortController实例
    }
  },
  methods: {
    handleSearch() {
      // 先取消之前的请求
      if (this.abortController) {
        this.abortController.abort()
      }
      
      // 创建新的AbortController
      this.abortController = new AbortController()
      
      // 发起请求，配置signal
      axios.get('/api/search', {
        params: { keyword: this.searchKeyword },
        signal: this.abortController.signal
      }).then(res => {
        console.log('搜索结果:', res.data)
      }).catch(err => {
        // 捕获取消请求的错误
        if (err.name === 'AbortError') {
          console.log('请求已取消')
        } else {
          console.error('请求出错:', err)
        }
      })
    }
  },
  beforeDestroy() {
    // 组件销毁前取消请求
    if (this.abortController) {
      this.abortController.abort()
    }
  }
}
</script>

• 如果是全局的请求拦截，比如在Vue项目的axios封装里，你可以维护一个存储所有请求取消方法的数组，在需要的时候批量取消，或者在路由切换时取消当前页面的所有未完成请求
• 取消请求后记得捕获对应的错误，避免控制台出现不必要的报错信息
• 对于频繁触发的请求（比如搜索、滚动加载），结合防抖使用效果会更好，减少不必要的请求取消操作

内容的提问来源于stack exchange，提问作者Ready Dev