react如何取消请求
取消请求的方法
在React中，取消请求通常涉及使用AbortController API或第三方库（如Axios）的取消功能。以下是几种常见实现方式：
使用AbortController
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
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('Request was canceled');
}
});
return () => {
controller.abort(); // 组件卸载时取消请求
};
}, []);
}Axios的CancelToken（旧版本）
import axios from 'axios';
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', {
cancelToken: source.token
}).catch(err => {
if (axios.isCancel(err)) {
console.log('Request canceled');
}
});
return () => {
source.cancel('Component unmounted');
};
}, []);
}Axios的AbortController（新版本）
import axios from 'axios';
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const controller = new AbortController();
axios.get('https://api.example.com/data', {
signal: controller.signal
}).catch(err => {
if (axios.isCancel(err)) {
console.log('Request canceled');
}
});
return () => {
controller.abort();
};
}, []);
}注意事项
- 取消请求时，相关Promise会被reject，需要正确处理错误
- 确保在组件卸载或不需要请求时及时取消
- 对于多个并行请求，可以共用同一个AbortController
- 某些旧浏览器可能需要polyfill支持AbortController
