React中使用window.stop()取消请求时误取消新组件请求的方案咨询

问题根源 #

window.stop()是全局API，会终止浏览器当前所有待处理的网络请求，不分组件归属。而React路由跳转时的生命周期顺序是：

1. 新组件的componentWillMount执行并发起请求
2. 旧组件的componentWillUnmount执行，调用window.stop()
   这就导致新页面刚发起的请求被一并终止。

可行解决方案 #

1. 使用AbortController精准取消当前组件请求（推荐） #

为每个组件发起的请求绑定独立的AbortController，组件卸载时仅取消自身发起的请求，不会影响其他组件的请求。

类组件示例：

class Page1 extends React.Component {
  constructor(props) {
    super(props);
    // 存储当前组件所有请求的控制器
    this.abortControllers = [];
  }

  fetchPageData = async (pageNum) => {
    const controller = new AbortController();
    this.abortControllers.push(controller);
    try {
      const response = await fetch(`/api/page-data?page=${pageNum}`, {
        signal: controller.signal
      });
      const data = await response.json();
      // 处理分页数据
    } catch (error) {
      // 忽略取消请求的错误
      if (error.name !== 'AbortError') {
        console.error('请求失败:', error);
      }
    }
  };

  componentDidMount() {
    // 发起多个分页请求
    this.fetchPageData(1);
    this.fetchPageData(2);
    this.fetchPageData(3);
  }

  componentWillUnmount() {
    // 取消当前组件所有待处理请求
    this.abortControllers.forEach(controller => controller.abort());
  }

  render() {
    // 页面渲染逻辑
    return (
      <div>
        <button onClick={() => this.props.navigate('/page2')}>跳转到页面2</button>
      </div>
    );
  }
}

函数组件示例：

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

function Page1() {
  const navigate = useNavigate();
  // 用useRef存储控制器，避免组件重渲染时重置
  const abortControllers = useRef([]);

  const fetchPageData = async (pageNum) => {
    const controller = new AbortController();
    abortControllers.current.push(controller);
    try {
      const response = await fetch(`/api/page-data?page=${pageNum}`, {
        signal: controller.signal
      });
      const data = await response.json();
      // 处理分页数据
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('请求失败:', error);
      }
    }
  };

  useEffect(() => {
    // 发起分页请求
    fetchPageData(1);
    fetchPageData(2);
    fetchPageData(3);

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

  return (
    <div>
      <button onClick={() => navigate('/page2')}>跳转到页面2</button>
    </div>
  );
}

2. 调整新页面请求时机到componentDidMount（退而求其次） #

如果暂时不想重构请求逻辑，可以将新页面的请求从componentWillMount移到componentDidMount。因为React路由跳转的生命周期顺序是：
新组件componentWillMount → 新组件render → 旧组件componentWillUnmount → 新组件componentDidMount
这样旧组件的window.stop()执行时，新页面的请求还未发起，就不会被取消。但这种方式会延迟请求发起时机，可能影响页面加载速度，不推荐作为长期方案。

3. 封装可自动取消的请求Hook #

可以封装一个通用Hook，统一管理请求的发起与取消，减少重复代码：

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

function useFetchWithAbort(url, options = {}) {
  const abortController = useRef(new AbortController());
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          ...options,
          signal: abortController.current.signal
        });
        const result = await response.json();
        setData(result);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // 组件卸载时取消请求
    return () => abortController.current.abort();
  }, [url, options]);

  return { data, loading, error };
}

// 使用示例
function Page2() {
  const { data, loading, error } = useFetchWithAbort('/api/projects');

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求失败: {error.message}</div>;

  return (
    <div>
      <h2>项目列表</h2>
      <ul>
        {data?.map(project => (
          <li key={project.id}>{project.name}</li>
        ))}
      </ul>
    </div>
  );
}

总结 #

不需要将所有componentWillMount替换为componentDidMount，使用AbortController实现组件级的请求精准取消是最优方案，既不会影响新页面的请求，也能保证资源不被浪费。window.stop()因全局生效的特性，不适合用于组件级的请求管理。

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