取消请求
约 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(); // 组件卸载时取消请求
};
}, []);