在 Vue3 中封装的 Axios 实例中，若需要为部分接口提供手动取消请求的功能

---

核心思路

1. 封装接口时返回 Promise 和 abort 方法：
   为需要支持取消的接口返回一个对象，包含 promise 和 abort 方法，用户可通过 abort 主动中断请求。
2. 使用 AbortController 或 CancelToken：
   • 推荐 AbortController（浏览器原生 API，兼容性更好）。
   • 若使用 axios 的 CancelToken，需额外处理。

---

实现步骤

1. 封装 Axios 实例

// src/api/index.js
import axios from 'axios';// 创建 Axios 实例
const instance = axios.create({baseURL: '/api',timeout: 10000,
});// 封装需要支持取消的接口
export const api = {// 需要支持取消的接口getUsers() {const controller = new AbortController();const { signal } = controller;const promise = instance.get('/users', { signal });return {promise,abort: () => controller.abort(), // 提供 abort 方法};},// 不需要取消的接口getPosts() {return instance.get('/posts');},
};

---

2. 在组件中使用

<template><div><!-- 组件内容 --></div>
</template><script setup>
import { onBeforeUnmount } from 'vue';
import { api } from '@/api';// 调用支持取消的接口
const { promise: usersPromise, abort: abortUsers } = api.getUsers();// 处理数据
usersPromise.then((response) => {console.log('用户数据:', response.data);}).catch((error) => {if (error.name === 'AbortError') {console.log('用户请求被取消');} else {console.error('请求失败:', error);}});// 在组件卸载时取消请求
onBeforeUnmount(() => {abortUsers(); // 主动取消请求
});
</script>

---

关键点说明

1. 返回 Promise 和 abort 方法：

   • 接口函数返回一个对象，包含 promise 和 abort 方法。
   • 用户可通过 abort 方法随时中断请求。

2. 错误处理：

   • 捕获 AbortError 判断是否为用户主动取消。

3. 生命周期管理：

   • 在 onBeforeUnmount 中调用 abort，确保组件卸载时取消未完成的请求。

---

扩展场景

场景 1：手动触发取消

// 在用户点击取消按钮时触发
const cancelButton = () => {abortUsers(); // 主动调用 abort 方法
};

场景 2：防抖/节流中的取消

// 输入搜索框时，取消之前的请求
let currentAbortFn = null;const handleSearch = (query) => {// 取消之前的请求if (currentAbortFn) currentAbortFn();const { promise, abort } = api.getUsers({ query });currentAbortFn = abort;promise.then((data) => {// 处理数据});
};

---

其他注意事项

1. 服务端支持：

   • 前端取消请求仅终止浏览器端处理，服务端可能仍在执行。若需服务端终止操作，需传递唯一标识（如 requestId）。

2. 避免重复调用：

   • 确保 abort 方法在适当的时候调用（如组件卸载或用户主动操作），避免多次调用。

---

完整封装示例

// src/api/index.js
import axios from 'axios';const instance = axios.create({baseURL: '/api',timeout: 10000,
});export const api = {// 需要支持取消的接口getUsers(params) {const controller = new AbortController();const { signal } = controller;const promise = instance.get('/users', {params,signal,});return {promise,abort: () => controller.abort(),};},// 不需要取消的接口getPosts() {return instance.get('/posts');},
};

---

总结

通过以下步骤实现手动取消接口：

1. 在封装接口时，返回 Promise 和 abort 方法。
2. 在组件中通过 onBeforeUnmount 或用户操作调用 abort。
3. 错误处理时区分取消错误与其他错误。

此方法既保持了接口的灵活性，又实现了对特定请求的精准控制。