react如何中断ajax请求
中断 AJAX 请求的方法
在 React 中中断 AJAX 请求可以通过以下方式实现，具体取决于使用的请求库或原生 API：
使用原生 fetch 和 AbortController
fetch API 支持通过 AbortController 中断请求。创建一个 AbortController 实例，并将其信号传递给 fetch，调用 abort() 方法即可取消请求。
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已取消');
}
});
// 取消请求
controller.abort();使用 axios 的取消令牌
axios 提供了取消令牌机制。通过 CancelToken.source() 生成令牌，并将其传递给请求配置。调用 source.cancel() 即可中断请求。
const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', {
cancelToken: source.token
}).catch(err => {
if (axios.isCancel(err)) {
console.log('请求已取消', err.message);
}
});
// 取消请求
source.cancel('操作被用户取消');在 React 组件中集成取消逻辑
在 React 组件中，通常在 useEffect 的清理函数中调用取消逻辑，以避免组件卸载时请求未完成导致的内存泄漏。
useEffect(() => {
const controller = new AbortController();
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data', {
signal: controller.signal
});
const data = await response.json();
setData(data);
} catch (err) {
if (err.name !== 'AbortError') {
console.error('请求失败', err);
}
}
};
fetchData();
return () => {
controller.abort();
};
}, []);注意事项
- 中断请求后，
fetch会抛出AbortError，axios会抛出Cancel错误，需在catch中区分处理。 - 对于类组件，可在
componentWillUnmount中调用取消逻辑。 - 确保取消操作不会影响其他未完成的请求，尤其是在多个并行请求的场景中。
