vue请求封装实现页面跳转自动取消未完成请求的核心是“标记请求+统一取消”：通过abortcontroller为每个请求注入signal并存入全局容器，在路由守卫beforeeach中批量abort，响应拦截器静默处理取消错误，并支持白名单、接口豁免及组件级精细控制。
Vue 请求封装实现页面跳转时自动取消当前页面未完成请求，核心在于“标记请求 + 统一取消”：在每次发请求时生成可取消标识（如 CancelToken 或 AbortController.signal），存入全局管理容器；在路由跳转前遍历并触发取消逻辑。关键不是拦截每个组件，而是让请求本身具备可取消性，并由路由守卫统一调度。
用 AbortController 实现（推荐 Vue3 + Axios 1.5+）
现代 Axios（v0.22+）和浏览器原生支持 AbortController，语义清晰、兼容性好，且天然支持多请求批量取消。
- 在请求拦截器中为每个请求注入
signal：
const controller = new AbortController();
config.signal = controller.signal;
// 存入全局数组或 Pinia store
abortControllers.push(controller);
return config;
- 在
router.beforeEach中批量终止：
router.beforeEach((to, from, next) => {
abortControllers.forEach(c => c.abort('route change'));
abortControllers.length = 0;
next();
});
- 响应拦截器中静默处理取消错误（避免报错打断流程）：
service.interceptors.response.use(
res => res,
error => {
if (error.name === 'CanceledError' || error.name === 'AbortError') {
return Promise.resolve({ data: null, status: 0 }); // 或自定义空响应
}
return Promise.reject(error);
}
