当前位置：首页 > React

react如何中断ajax请求

2026-01-24 14:19:43React

中断 AJAX 请求的方法

在 React 中，可以通过 AbortController API 中断正在进行的 AJAX 请求。AbortController 是现代浏览器提供的原生功能，允许取消异步操作（如 fetch 请求）。

使用 `AbortController` 中断 `fetch` 请求

创建 AbortController 实例 在组件中创建一个 AbortController 实例，并将其 signal 传递给 fetch 请求的选项。
```
const controller = new AbortController();
const signal = controller.signal;
```

将 signal 传递给 fetch 在发起 fetch 请求时，将 signal 作为选项传入。当调用 controller.abort() 时，请求会被中断。

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Request was aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

中断请求 在需要中断请求时（如组件卸载或用户操作），调用 controller.abort()。
```
controller.abort();
```

在 React 组件中的完整示例

以下是一个在 React 组件中使用 AbortController 的完整示例：

import React, { useEffect } from 'react';

function DataFetchingComponent() {
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('https://api.example.com/data', { signal })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(err => {
        if (err.name === 'AbortError') {
          console.log('Request aborted');
        } else {
          console.error('Fetch error:', err);
        }
      });

    // 在组件卸载时中断请求
    return () => {
      controller.abort();
    };
  }, []);

  return <div>Fetching data...</div>;
}

中断 `axios` 请求

如果使用 axios 库，可以通过 CancelToken 或 AbortController（axios 0.22.0+）中断请求。

使用 CancelToken（旧版 axios）

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
  .then(response => console.log(response.data))
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('Request canceled:', err.message);
    } else {
      console.error('Axios error:', err);
    }
  });

// 中断请求
source.cancel('Request canceled by user');

使用 AbortController（新版 axios）

const controller = new AbortController();

axios.get('https://api.example.com/data', {
  signal: controller.signal
})
  .then(response => console.log(response.data))
  .catch(err => {
    if (err.name === 'CanceledError') {
      console.log('Request canceled');
    } else {
      console.error('Axios error:', err);
    }
  });

// 中断请求
controller.abort();