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