如何在点击时终止React中的递归API请求函数？

不用全局变量或localStorage，用React的useRef结合AbortController是最优解——既不会污染全局作用域，又能真正中断网络请求和递归，还能保持函数的复用性。以下是具体实现步骤和代码示例：

步骤说明 #

1. 给递归函数传入终止控制信号：修改单独文件中的fetchFile，让它接收AbortController实例，用来检查请求是否被终止，同时中断正在进行的网络请求。
2. 组件内维护控制器引用：用useRef存储AbortController实例，因为它的引用在异步/递归过程中保持不变，且更新不会触发组件重渲染。
3. 添加终止按钮逻辑：点击终止按钮时调用控制器的abort()方法，直接中断请求并终止递归。
4. 启动请求时重置状态：每次启动新请求前，先终止之前未完成的请求（如果有的话），避免多个请求同时运行。

修改后的代码示例 #

单独文件中的请求函数 #

/* 单独文件中的函数 */
export const fetchFile = async (controller) => {
  // 先检查请求是否已被终止
  if (controller.signal.aborted) {
    return 'Cancelled';
  }

  try {
    // 把控制器的signal传给fetch，支持中断请求
    const resp = await fetch('someUrl', { signal: controller.signal });
    // 注意：原生fetch的response没有直接的data属性，根据实际需求用resp.json()/resp.text()
    return await resp.json();
  } catch (err) {
    // 捕获请求被中断的错误
    if (err.name === 'AbortError') {
      return 'Cancelled';
    }

    // 404时重试，重试前再次检查终止状态
    if (err.response?.code === 404 && !controller.signal.aborted) {
      await sleep(10); // sleep是自定义的等待函数
      return fetchFile(controller);
    } else {
      return 'Error';
    }
  }
};

export const fetchAll = async (setData, setError, controller) => {
  const data = await fetchFile(controller);
  
  if (data === 'Error') {
    setError('Sorry, error occurred');
    return;
  }
  if (data === 'Cancelled') {
    setError('Fetch cancelled');
    return;
  }
  
  setData(data);
};

React组件代码 #

/* React组件 */
import { useState, useRef } from 'react';
import { fetchAll } from './your-request-file'; // 替换为你的实际文件路径

const FetchComponent = () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState('');
  // 用useRef存储AbortController实例，保持异步过程中的引用
  const abortControllerRef = useRef(null);

  const handleStartFetch = async () => {
    // 终止之前未完成的请求（如果存在）
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    
    // 创建新的控制器实例
    const controller = new AbortController();
    abortControllerRef.current = controller;
    
    setError(''); // 清空之前的错误信息
    await fetchAll(setData, setError, controller);
    
    // 请求完成后清空引用
    abortControllerRef.current = null;
  };

  const handleCancelFetch = () => {
    // 调用控制器的abort方法终止请求和递归
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
  };

  return (
    <div>
      <button onClick={handleStartFetch}>Start fetch</button>
      {/* 根据是否有未完成的请求禁用终止按钮 */}
      <button 
        onClick={handleCancelFetch} 
        disabled={!abortControllerRef.current}
      >
        Cancel
      </button>
      
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {/* 渲染获取到的数据 */}
      {data.length > 0 && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

export default FetchComponent;

为什么这个方案最优？ #

• 避免全局变量污染：useRef是组件内部的状态，多个组件实例之间不会互相影响，隔离性好。
• 真正中断网络请求：AbortController不仅能终止递归逻辑，还能直接中断正在进行的fetch请求，节省浏览器资源。
• 保持函数复用性：请求函数仍放在单独文件中，不需要全部移到组件内，方便在其他地方复用。
• 无不必要重渲染：useRef的更新不会触发组件重渲染，避免了不必要的性能开销。

替代方案的问题 #

• 全局window变量：会污染全局作用域，多个组件使用时会互相干扰，难以维护。
• localStorage：是持久化存储，适合保存用户偏好等数据，不适合这种临时的运行时状态，读写还涉及异步操作，完全没必要。

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