vue axios 请求拦截器，取消

最新推荐文章于 2025-09-08 14:31:01 发布

wxj_web

最新推荐文章于 2025-09-08 14:31:01 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： axios 文章标签： vue axios 拦截器

本文链接：https://blog.csdn.net/wxj_ios/article/details/85328323

axios 专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍如何在Vue中使用axios的cancelToken参数来实现请求的取消。通过设置`config.cancelToken = source.token`，可以结合自定义工具函数intercept.createIntercept，配合Vuex状态管理，确保在3秒内同一请求不会重复发送，从而优化应用性能。

首先需要了解一下，axios的官方API（https://www.kancloud.cn/yunye/axios/234845），知道当中的参数配置。

url?: string;

method?: string;

baseURL?: string;

...省略...

cancelToken?: CancelToken;

在这里，我重点讲的便是cancelToken这个参数。

var CancelToken = axios.CancelToken
var source = CancelToken.source()
// let that = this
axios.interceptors.request.use(function (config) {
  // 预处理请求信息（config）
  console.log(config)
  let dt = new Date()
  let pd = intercept.createIntercept(store, config.name, dt.getTime())
  if (pd === false) {
    config.cancelToken = source.token
    // 取消请求（message 参数是可选的）
    source.cancel('Operation canceled by the user.')
  }
  return config
}, function (error) {
  // 预处理请求有异常（error）时抛出错误
  return Promise.reject(error)
})

核心的方法便是

config.cancelToken = source.token

修改这一个属性，便能取消请求，至于在什么条件下取消请求，这个因人而异，我在外部写了一个工具函数intercept.createIntercept(store, config.name, dt.getTime())，配合vuex一切使用的。

const intercept = {
  createIntercept (thisw, name, dt) {
    console.log(thisw)
    console.log(name)
    let nameMap = thisw.state.nameMap
    // get方法，若是返回undefiend
    if (nameMap.get(name) === undefined) {
      nameMap.set(name, dt)
    } else if (nameMap.get(name) !== undefined && ((dt - nameMap.get(name)) > 3000)) {
      nameMap.set(name, dt)
      console.log(thisw.state)
    } else if (nameMap.get(name) !== undefined && ((dt - nameMap.get(name)) < 3000)) {
      console.log('时间太短了！')
      return false
    }
    // console.log(nameMap)
    // return false
  }
}
export default intercept

这个工具函数的作用是，同一个函数在3秒内不会再次发送请求。