react如何取消请求

取消请求的方法

在React中，取消请求通常通过AbortController实现。该API允许中止一个或多个Web请求，适用于fetch或axios等库。

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();

在React组件中的实现

结合useEffect的清理机制，可以在组件卸载时自动取消未完成的请求：

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());

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

使用axios取消请求

axios内部支持AbortController，也可以通过其内置的CancelToken（旧版）实现：

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
}).catch(err => {
  if (axios.isCancel(err)) {
    console.log('请求已取消');
  }
});

// 取消请求
source.cancel();

注意事项

• 请求取消后，Promise会进入rejected状态，需通过错误类型区分是取消还是其他错误。
• 对于并发请求，可共用同一个AbortController同时取消多个请求。
• 在React 18严格模式下，开发环境组件会多次挂载/卸载，需确保取消逻辑幂等性。