image.png

方案一：使用 AbortController（推荐，Axios >= 0.22.0），AbortController 是浏览器原生 API，可通过 signal 控制请求的终止。

<template>
    <el-button @click="send">发送请求</el-button>
    <el-button @click="stop">终止请求</el-button>
</template>
<script setup >
const controller = ref(new AbortController());
import {getMsgList} from '@/api/list/index.js';
function send() {
  getList();
}
function stop() {
   controller.value.abort(); // 终止请求
  controller.value = new AbortController(); // 重置控制器（可选）
}
function getList() {
  getMsgList(queryParams.value,  controller.value.signal).then((response) => {
  }) .catch((error) => {
      // 检查是否是 AbortController 触发的取消
      if (error.name === 'CanceledError') {
        proxy.$modal.msgError('用户主动取消了请求');
      }
    });;
}
</script>
//getMsgList.js
export function getMsgList(query, token) {
  return request({
    url: '/api/list',
    method: 'get',
    params: query,
     signal:signal
  });
}
//在组件卸载时（onUnmounted 钩子）取消未完成的请求，防止内存泄漏：
onUnmounted(() => {
  stop();
});

方法 2：使用 CancelToken（旧版 Axios < 0.22.0），Axios 早期版本通过 CancelToken 实现请求取消。

<template>
    <el-button @click="send">发送请求</el-button>
    <el-button @click="stop">终止请求</el-button>
</template>
<script setup >
import axios from 'axios';
let axiosSource = axios.CancelToken.source();
import {getMsgList} from '@/api/list/index.js';
function send() {
//发送请求前，需要重新生成CancelToken.source,
//不然再也无法从该 URL 获得成功的响应,
//因为同一个CancelToken.source都会被取消请求,
//所以在重新请求前，需要重新生成一个CancelToken.source
  axiosSource = axios.CancelToken.source();
  getList();
}

function stop() {
  axiosSource.cancel('取消请求');
}

function getList() {
  getMsgList(queryParams.value, axiosSource.token).then((response) => {
  });
}
</script>
//getMsgList.js
export function getMsgList(query, token) {
  return request({
    url: '/api/list',
    method: 'get',
    params: query,
    cancelToken: token
  });
}
//在组件卸载时（onUnmounted 钩子）取消未完成的请求，防止内存泄漏：
onUnmounted(() => {
  stop();
});