React中使用AbortController后Axios仍返回数据的问题排查

问题根源 #

你遇到的核心问题：

• 最初直接在组件内创建AbortController，组件重渲染时会生成新实例，导致取消按钮引用的控制器无法关联到之前发起的请求，无法终止请求。
• 改用useRef存储后，第一次取消有效但后续搜索自动取消，是因为复用了已调用过abort()的旧控制器实例——其signal已处于终止状态，新请求使用该signal会直接被取消。

解决方案1：正确使用useRef管理AbortController #

每次发起新请求前，先取消未完成的旧请求，再创建新的AbortController实例存入useRef：

import { useRef, useState, useEffect } from 'react';
import axios from 'axios';

function MovieSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const abortControllerRef = useRef(null);

  const handleSearch = async () => {
    // 先取消之前未完成的请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    // 创建新的控制器实例
    abortControllerRef.current = new AbortController();

    try {
      const response = await axios.post(
        '/api/openai-movie-search',
        { query: searchTerm },
        { signal: abortControllerRef.current.signal }
      );
      setResults(response.data);
    } catch (error) {
      // 忽略取消请求的错误，避免控制台冗余提示
      if (axios.isCancel(error)) {
        console.log('搜索请求已取消');
        return;
      }
      console.error('搜索请求失败:', error);
    }
  };

  const handleCancel = () => {
    abortControllerRef.current?.abort();
  };

  // 组件卸载时取消未完成请求，防止内存泄漏
  useEffect(() => {
    return () => abortControllerRef.current?.abort();
  }, []);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="输入电影名称搜索..."
      />
      <button onClick={handleSearch}>搜索</button>
      <button onClick={handleCancel}>取消搜索</button>
      <div className="results">
        {results.map((movie, idx) => (
          <div key={idx}>{movie.title}</div>
        ))}
      </div>
    </div>
  );
}

export default MovieSearch;

解决方案2：封装自定义Hook复用取消逻辑 #

如果多个组件需要请求取消功能，可封装成自定义Hook简化代码：

import { useRef, useEffect } from 'react';
import axios from 'axios';

function useAxiosCancellation() {
  const abortControllerRef = useRef(null);

  // 取消当前请求
  const cancelRequest = () => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
  };

  // 获取新的signal，自动取消旧请求
  const getRequestSignal = () => {
    cancelRequest();
    abortControllerRef.current = new AbortController();
    return abortControllerRef.current.signal;
  };

  // 组件卸载时自动取消请求
  useEffect(() => cancelRequest, []);

  return { getRequestSignal, cancelRequest };
}

// 使用自定义Hook的组件示例
function MovieSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const { getRequestSignal, cancelRequest } = useAxiosCancellation();

  const handleSearch = async () => {
    try {
      const response = await axios.post(
        '/api/openai-movie-search',
        { query: searchTerm },
        { signal: getRequestSignal() }
      );
      setResults(response.data);
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('搜索请求已取消');
        return;
      }
      console.error('搜索失败:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="输入电影名称..."
      />
      <button onClick={handleSearch}>搜索</button>
      <button onClick={cancelRequest}>取消搜索</button>
      {/* 结果展示区域 */}
    </div>
  );
}

关键注意事项 #

• 每次发起新请求必须创建新的AbortController实例，不能复用已调用过abort()的实例——其signal一旦终止无法恢复。
• 捕获请求错误时，通过axios.isCancel(error)判断是否为取消请求的错误，避免误报。
• 组件卸载时取消未完成的请求，防止内存泄漏和不必要的状态更新。

内容的提问来源于stack exchange，提问作者lkalliance