当前位置：首页 > React

react如何中断ajax请求

2026-03-10 22:47:23React

中断 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 的清理函数中调用取消逻辑，以避免组件卸载时请求未完成导致的内存泄漏。

react如何中断ajax请求

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();
  };
}, []);