react如何取消请求
取消请求的方法
在React中，取消请求可以通过以下几种方式实现：
使用AbortController
AbortController是现代浏览器提供的API，可用于取消fetch请求。创建一个AbortController实例，将其signal传递给fetch请求，调用abort()方法即可取消请求。
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(response => response.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已取消');
}
});
// 取消请求
controller.abort();Axios的CancelToken
如果使用Axios库，可以通过CancelToken取消请求。创建一个CancelToken源，将其传递给请求配置，调用cancel()方法取消请求。
const source = axios.CancelToken.source();
axios.get(url, { cancelToken: source.token })
.then(response => console.log(response))
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('请求已取消', thrown.message);
}
});
// 取消请求
source.cancel('操作被用户取消');在React组件中取消请求
在React组件中，通常在useEffect的清理函数中取消请求，以避免组件卸载时请求仍在进行。
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(response => response.json())
.then(data => setData(data))
.catch(err => {
if (err.name === 'AbortError') return;
console.error(err);
});
return () => {
controller.abort();
};
}, [url]);使用第三方库
一些第三方库如react-query或swr内置了请求取消功能。例如，react-query在组件卸载时会自动取消未完成的请求。
const { data } = useQuery('todos', () => fetch(url).then(res => res.json()));注意事项
- AbortController不兼容旧版浏览器，如需支持可考虑polyfill。
- 确保在请求完成或组件卸载时调用取消方法，避免内存泄漏。
- 对于并发请求，需要为每个请求单独创建AbortController实例。
