const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
    cancelToken: source.token
}).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else { /* 处理错误 */ }
});

axios.post('/user/12345', {
    name: 'new name'
}, {
    cancelToken: source.token
});

// 取消请求 (message 参数是可选的)
source.cancel('Operation canceled by the user.');

同时还可以通过传递一个executor函数到CancelToken的构造函数来创建 cancel token ：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        // executor 函数接收一个 cancel 函数作为参数
        cancel = c;
    })
});

// 取消请求
cancel();

这是官方提供的两种方法，我们将他们用到我们的项目上，因为都差不多，所以我们这里就只演示一种，选择通过传递函数的方式来取消请求；

进入项目utils文件夹下的request.ts文件，修改代码如下：

// request.ts

import axios, { AxiosRequestConfig } from 'axios'
const CancelToken = axios.CancelToken

const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})

// 新建一个取消请求函数并导出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}
export function request(Args: AxiosRequestConfig) {
  // 在请求配置中增加取消请求的Token
  Args.cancelToken = new CancelToken(function (cancel) {
    cancelFn = cancel
  })
  return ins.request(Args)
}

然后我们就可以在想要取消请求的地方调用cancelFn函数就可以了，我们给tab1和tab3按钮都加上取消请求功能：

// bar.vue

<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'

const context = ref('tab1的内容...')

const getTab1Context = async () => {
  cancelFn('取消了tab2的请求')
  const { data } = await request({
    url: '/tab1',
  })

  context.value = data
}
const getTab2Context = async () => {
  const { data } = await request({
    url: '/tab2',
  })

  context.value = data
}
const getTab3Context = async () => {
  cancelFn('取消了tab2的请求')
  const { data } = await request({
    url: '/tab3',
  })

  context.value = data
}
</script>

// request.ts

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'

const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})

// 新建一个取消请求函数并导出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}

export function request(Args: AxiosRequestConfig): Promise<AxiosResponse> {
  return new Promise((resolve, reject) => {
    ins.request(Args).then((res: AxiosResponse) => {
      resolve(res)
    })
    cancelFn = (msg) => {
      reject(msg)
    }
  })
}

// cancelClass.ts

import { AxiosResponse } from 'axios'
export class CancelablePromise {
pendingPromise: any
reject: any
constructor() {
this.pendingPromise = null
this.reject = null

  }


  handleRequest(requestFn: any): Promise<AxiosResponse> {
if (this.pendingPromise) {
this.cancel('取消了上一个请求。。。')

    }
const promise = new Promise((resolve, reject) => (this.reject = reject))
this.pendingPromise = Promise.race([requestFn(), promise])
return this.pendingPromise

  }

cancel(reason: string) {
this.reject(reason)
this.pendingPromise = null

  }

}

// request.ts

export function request(Args: AxiosRequestConfig) {
return () => ins.request(Args)

}

// bar.vue


<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'
import { CancelablePromise } from '@/utils/cancelClass'


...
const cancelablePromise = new CancelablePromise()

...
const getTab2Context = async () => {
const { data } = await cancelablePromise.handleRequest(

    request({
url: '/tab2',

    })

  )


  context.value = data

}

</script>