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实例。