React+Node.js中Axios终止API请求失效问题求助

你的代码逻辑本身没问题，但请求未被取消通常是以下几个原因导致的，对应解决方案如下：

可能的原因及修复步骤 #

1. axios版本不支持AbortController #

axios在v0.22.0之后才正式支持AbortController，如果你的版本低于这个范围，需要先升级：

npm update axios
# 或 yarn upgrade axios

2. 组件卸载时清理函数未触发 #

如果路由切换时组件被缓存（比如部分路由库的缓存机制），useEffect的清理函数不会执行。这种情况下可以直接监听浏览器的popstate事件（返回按钮触发该事件），主动取消请求：

修改后的完整代码：

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

const UserPage = ({ path }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    let isUnmounted = false;

    const fetchSingleUser = async () => {
      try {
        const response = await axios.get(`/users/singleUser/${path}`, {
          signal: controller.signal
        });
        // 组件未卸载时再更新状态，避免内存泄漏
        if (!isUnmounted) {
          setUser(response.data);
        }
      } catch (error) {
        // 区分取消请求的错误和其他异常
        if (axios.isCancel(error)) {
          console.log('请求已取消:', error.message);
        } else {
          console.error('请求失败:', error);
        }
      }
    };

    fetchSingleUser();

    // 监听浏览器返回事件
    const handlePopState = () => {
      controller.abort('用户点击返回按钮取消请求');
    };
    window.addEventListener('popstate', handlePopState);

    // 组件卸载时清理资源
    return () => {
      isUnmounted = true;
      controller.abort('组件卸载取消请求');
      window.removeEventListener('popstate', handlePopState);
    };
  }, [path]);

  return (
    <div>
      {user ? <div>用户信息：{JSON.stringify(user)}</div> : <div>加载中...</div>}
    </div>
  );
};

export default UserPage;

3. 未处理取消请求的错误 #

请求被abort时会抛出专属错误，需要捕获避免控制台报错，同时也能确认请求是否被成功取消。

额外优化（React Router场景） #

如果使用React Router v6+，也可以通过监听路由变化来触发取消操作，确保路由切换时请求被终止：

import { useLocation } from 'react-router-dom';

// 组件内添加
const location = useLocation();

useEffect(() => {
  const controller = new AbortController();
  
  // ... 请求逻辑同前

  return () => controller.abort();
}, [location.pathname]); // 监听路由路径变化

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