在路由切换时取消请求，核心做法是利用 abortcontroller 实例的 abort() 方法。在组件挂载或路由进入时创建控制器，将它的 signal 传给 fetch 或 axios；在路由离开或组件卸载前调用 abort()，浏览器会自动终止该请求并抛出 aborterror，从而避免内存泄漏和无效的状态更新。
Vue Router 中如何集成 AbortController
在 Vue Router 的全局前置守卫或组件的生命周期钩子中管理控制器。推荐在组件内部使用 onBeforeRouteLeave 或在组合式 API 的 onUnmounted 中触发取消，确保逻辑与组件生命周期绑定。这样当用户点击导航链接时，当前页面的未完成任务会被立即中断。
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
export default {
setup() {
const data = ref(null);
const route = useRoute();
const router = useRouter();
let controller = null;
const fetchData = async () => {
// 每次请求前重置控制器
if (controller) controller.abort();
controller = new AbortController();
try {
const response = await fetch(`/api/data?id=${route.query.id}`, {
signal: controller.signal
});
const json = await response.json();
data.value = json;
} catch (error) {
if (error.name !== 'AbortError') {
console.error('Fetch failed:', error);
}
}
};
onMounted(() => fetchData());
// 路由离开时取消请求
onBeforeRouteLeave((to, from, next) => {
if (controller) {
controller.abort();
}
next();
});
return { data };
}
};
上述代码展示了在 Vue 3 组合式 API 中的标准实现。关键点在于 onBeforeRouteLeave 钩子会在路由跳转发生前执行，此时调用 controller.abort() 可以确保旧路由的请求被终止。捕获异常时特意检查 error.name === 'AbortError'，以避免将正常的取消操作误报为网络错误。
立即学习“Java免费学习笔记（深入）”；
Axios 中如何实现相同效果
Axios 原生支持 signal 属性，因此用法与 fetch 几乎一致。只需将 AbortController 的实例传入配置对象的 signal 字段即可。Axios 会在底层监听信号状态，一旦触发中止，它会拒绝 Promise 并抛出带有 code: 'ERR_CANCELED' 的错误对象。
import axios from 'axios';
import { ref, onUnmounted } from 'vue';
export default {
setup() {
const result = ref(null);
let source = axios.CancelToken.source();
const loadData = async () => {
try {
const res = await axios.get('/api/info', {
// Axios 兼容写法：使用 CancelToken
cancelToken: source.token,
// 或者现代写法（推荐）：
// signal: source.signal
});
result.value = res.data;
} catch (error) {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.error('Error:', error);
}
}
};
loadData();
// 组件卸载时取消
onUnmounted(() => {
source.cancel('Component unmounted');
});
return { result };
}
};
虽然 Axios 提供了自己的 CancelToken API，但在新版本中更推荐使用标准的 AbortController 以保持与现代 Web API 的一致性。如果项目中使用的是较新版本的 Axios，可以直接使用 signal 属性。无论哪种方式，核心思想都是在组件销毁或路由切换时主动切断数据流，防止后台请求完成后尝试更新已卸载组件的状态。
如何处理并发请求导致的竞态条件
当用户在短时间内快速切换路由或触发多次搜索时，可能会产生多个并发请求。后发出的请求可能先于先发出的请求完成，导致页面显示过时或错误的数据。解决这一问题的最佳实践是在发起新请求之前，先取消上一次未完成的请求。
在上面的 Vue 示例中，fetchData 函数开头就包含了 if (controller) controller.abort(); 这一行。这意味着每次重新获取数据时，旧的控制器都会被废弃，新的请求会获得一个全新的 signal。这种“自毁式”的请求模式确保了最终展示的数据总是对应最近一次的用户操作。结合路由守卫中的取消逻辑，可以构建一个健壮的数据加载流程，既避免了资源浪费，又保证了 UI 状态的准确性。
