取消请求
约 358 字大约 1 分钟
2026-03-31
问题
如何取消请求？
在前端开发中，取消 HTTP 请求主要用于避免内存泄漏、竞态条件（如快速切换搜索关键词）或组件卸载后响应仍被处理等问题。不同请求方式的取消机制如下：
1. fetch + AbortController
取消 fetch 请求，需要用到 AbortController API，AbortController 实例中有一个只读属性 signal， 可以传入 fetch 中将控制器与请求关联起来。
const controller = new AbortController();
const { signal } = controller;
fetch('/api/data', { signal })
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已取消');
} else {
console.error('请求失败', err);
}
});
// 取消请求
controller.abort(); // 触发 AbortErrorsignal 可传递给多个 fetch 共享同一取消信号。
2. Axios
方式一：AbortController
下面是如今的推荐取消方式：
const controller = new AbortController();
axios.get('/api/data', {
signal: controller.signal
}).catch(err => {
if (axios.isCancel(err)) {
console.log('请求已取消');
}
});
controller.abort();方式二：CancelToken（已废弃，不推荐）
const source = axios.CancelToken.source();
axios.get('/api/data', { cancelToken: source.token })
.catch(err => {
if (axios.isCancel(err)) console.log('取消:', err.message);
});
source.cancel('手动取消');官方已弃用 CancelToken，推荐使用 AbortController。
3. XMLHttpRequest（传统方式）
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send();
// 取消
xhr.abort(); // 立即终止请求，触发 onreadystatechange（readyState=4, status=0）4. React 中的典型应用场景（防内存泄漏）
useEffect(() => {
const controller = new AbortController();
fetch('/api/user', { signal: controller.signal })
.then(res => res.json())
.then(data => setUser(data))
.catch(e => {
if (e.name !== 'AbortError') setError(e);
});
return () => {
controller.abort(); // 组件卸载时取消请求
};
}, []);