axios 取消请求 （2023-10-10更新）

axios 文档

配置局部取消请求

这种相当于局部的取消请求，作用于单个请求中

import axios from 'axios'
const source = axios.cancelToken.source()

axios
  .get('getData', {
    cancelToekn: source.token
  })
  .catch((err) => {
    if (axios.isCancel(err)) {
      console.log('Request canceled：', err.message)
    } else {
      console.log(err)
    }
  })

setTimeout(() => {
  source.cancel('取消请求')
}, 1000)

配置全局取消请求 1（多个相同请求，取消上一次请求）

可以在拦截器中进行配置，做成全局的取消请求

import axios from 'axios'

const cancelMap = {}
const service = axios.create({})

service.interceptors.request.use((config) => {
  const source = axios.CancelToken.source()
  cancelMap[config.url] = source

  config.cancelToken = source.token

  return config
})

export const cancelRequest = (key) => {
  if (cancelMap[key]) {
    cancelMap[key].cancel('取消请求')
    delete cancelMap[key]
  }
}

以上这种方法适用于： 用户点击搜索，发起搜索请求，但上一次搜索请求还没有返回，这时候需要将上一次请求取消掉

适用于： 多个相同请求，需要将上一次请求取消掉

配置全局取消请求 2（取消这次请求之前的所有请求）

import axios from 'axios'

const source = axios.CancelToken.source()
const service = axios.create({})

service.interceptors.request.use((config) => {
  config.cancelToken = source.token
  return config
})

export const cancelRequest = (key) => {
  source.cancel('取消请求')
}

这种方法适用于： 发起一次请求，取消之前的所有请求

以上方法如果嫌引入麻烦，可以自行绑定 Vue.prototype.cancelRequest