如何在vue3项目中使用 AbortController取消axios请求

在 Vue3 项目中通过 AbortController 取消 Axios 请求，可以通过以下 结构化步骤 实现。我们结合组合式 API（Composition API）和现代前端实践演示：

一、基础实现（单个请求）

1. 创建组件逻辑

<script setup>
import { ref, onBeforeUnmount } from 'vue';
import axios from 'axios';// 存储 AbortController 实例
const abortController = ref(null);
const data = ref(null);
const error = ref(null);
const isLoading = ref(false);// 发送请求方法
const fetchData = async () => {isLoading.value = true;error.value = null;// 如果存在旧请求，先取消if (abortController.value) {abortController.value.abort();}// 创建新控制器abortController.value = new AbortController();try {const response = await axios.get('/api/data', {signal: abortController.value.signal});data.value = response.data;} catch (err) {// 重点：识别取消错误if (err.name === 'CanceledError' || axios.isCancel(err)) {console.log('请求被主动取消');} else {error.value = err.message;}} finally {isLoading.value = false;abortController.value = null; // 清理控制器}
};// 组件卸载时自动取消
onBeforeUnmount(() => {if (abortController.value) {abortController.value.abort();}
});
</script><template><button @click="fetchData" :disabled="isLoading">{{ isLoading ? '加载中...' : '获取数据' }}</button><button @click="abortController?.abort()" :disabled="!isLoading">取消请求</button><div v-if="data">{{ data }}</div><div v-if="error" class="error">{{ error }}</div>
</template>

二、进阶实现（多个并行请求）

1. 封装可复用 Hook

// src/composables/useAbortController.js
import { onBeforeUnmount } from 'vue';export default function useAbortController() {const controllers = new Map(); // 用 Map 存储多个控制器// 添加控制器const createSignal = (requestId) => {const controller = new AbortController();controllers.set(requestId, controller);return controller.signal;};// 取消特定请求const abortRequest = (requestId) => {if (controllers.has(requestId)) {controllers.get(requestId).abort();controllers.delete(requestId);}};// 自动清理onBeforeUnmount(() => {controllers.forEach(controller => controller.abort());controllers.clear();});return { createSignal, abortRequest };
}

2. 在组件中使用

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import useAbortController from '@/composables/useAbortController';const { createSignal, abortRequest } = useAbortController();
const userData = ref(null);
const postData = ref(null);// 并行发送多个请求
const fetchAllData = async () => {try {const [usersRes, postsRes] = await Promise.all([axios.get('/api/users', {signal: createSignal('users') // 唯一标识}),axios.get('/api/posts', {signal: createSignal('posts')})]);userData.value = usersRes.data;postData.value = postsRes.data;} catch (err) {if (!err.name.includes('Cancel')) {console.error('请求失败:', err);}}
};// 手动取消用户数据请求
const cancelUsers = () => abortRequest('users');
</script><template><button @click="fetchAllData">加载全部数据</button><button @click="cancelUsers">取消用户数据请求</button>
</template>

三、最佳实践要点

1. 错误处理规范

try {// ...请求逻辑
} catch (err) {if (err.name === 'CanceledError' || axios.isCancel(err)) {console.log('请求取消:', err.message);return; // 明确终止后续处理}// 其他错误处理if (err.response?.status === 404) {// 处理 404} else {// 通用错误}
}

2. 自动取消优化

在路由切换时自动取消所有请求：

// src/router.js
import { createRouter } from 'vue-router';
import { useAbortController } from '@/composables/useAbortController';const router = createRouter({...});// 路由守卫中全局取消
router.beforeEach(() => {const { abortAll } = useAbortController();abortAll(); // 需要扩展 Hook 功能
});

3. TypeScript 类型支持

// types/abort.d.ts
import type { AxiosRequestConfig } from 'axios';declare module 'axios' {export interface AxiosRequestConfig {signal?: AbortSignal;requestId?: string; // 自定义标识}
}

四、常见问题解决

1. 取消无效问题

• 检查 Axios 版本：确保使用 axios@0.22.0+

• 验证信号传递：确认请求配置中正确传递了 signal

• 避免重复使用控制器：每个请求必须使用新实例

2. 内存泄漏预防

// 在组件卸载时清理
onBeforeUnmount(() => {abortController.value?.abort();controllers.clear(); // 对于 Map 存储的情况
});

3. 浏览器兼容性

# 安装 polyfill（如需支持 IE11）
npm install abortcontroller-polyfill

// main.js
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';

通过这种设计，你可以实现：

• ✅ 组件级自动请求取消

• ✅ 精细化的多请求管理

• ✅ 符合 Vue3 响应式特性的状态管理

• ✅ 完善的 TypeScript 类型支持