思路

axios可以通过 CancelToken 类创建一个标记，将他与指定的请求进行关联后，我们就可以通过这个标记进行取消请求了

实现

1. 创建一个取消请求的辅助函数：

// http是本人项目中封装的axios(axios.create返回的)，根据实际情况替换掉就行
import http from '@/utils/axios'  
import axios, { type CancelTokenSource } from 'axios'

/**
 * 用于创建一个可取消请求
 *
 * @returns 返回一个对象，包含请求和取消请求的方法
 */
function createCancelableRequest() {
  let cancelTokenSource: CancelTokenSource | null = null

  return {
    request: (url: string, data: any, method: string = 'post') => {
      // 如果有未完成的请求，则取消它
      if (cancelTokenSource) cancelTokenSource.cancel('Operation canceled due to new request.')

      // 创建新的取消令牌
      cancelTokenSource = axios.CancelToken.source()

      return http?.[method](url, data, {
        cancelToken: cancelTokenSource.token,
      }).then(response => {
        // 请求成功处理
        cancelTokenSource = null
        return response
      }).catch(error => {
        if (axios.isCancel(error)) {
          console.log('Request canceled:', error.message)
        } else {
          // 处理其他错误
          throw error
        }
      })
    },
    cancel: () => {
      if (!cancelTokenSource) return

      cancelTokenSource.cancel('Operation canceled by user.')
      cancelTokenSource = null
    }
  }
}

2. 使用辅助函数发起请求：

// 创建一个封装了取消逻辑的辅助函数
const brandListRequest = createCancelableRequest();

/**
 * 获取xxx数据
 *
 * @param data 请求数据
 * @returns 返回数据
 */
export function obtainBrandList(data: any) {
  return brandListRequest.request('/brand/getBrandList/xy', data)
}
/**
 * 取消xxx的请求
 */
export function cancelObtainBrandList() {
  brandListRequest.cancel()
}

3. 实践

// 发起请求
obtainBrandList(someData)
  .then(response => {
    // 处理成功响应
    console.log('Response received:', response);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      // 处理其他错误
      console.error('Request error:', error);
    }
  });

// 需要取消请求时调用
cancelObtainBrandList();

CancelToken 生成的标记只能使用一次的！！！，所以每次请求时都要重新生成