如何在React中实现无重叠异步Fetch请求的轮询？

你的自定义Hook核心需求是实现初始数据获取+定时轮询，但原代码存在请求重叠、竞态条件、加载状态异常等问题，以下是修复方案：

问题分析 #

原代码的核心缺陷：

• 使用setInterval固定间隔触发请求，完全无视前一次请求是否完成，导致多个请求并发执行，引发数据覆盖、加载闪烁。
• 定义了flagRef但未实际用于阻止并发请求，形同虚设。
• 单个AbortController无法区分不同请求，无法精准取消未完成的旧请求。
• 未处理竞态条件：旧请求的响应可能晚于新请求完成，导致状态被旧数据覆盖。

修复后的代码 #

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

export default function useReFetch(url, intervalSeconds) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    // 标记当前是否有请求在进行，避免并发重叠
    const isFetchingRef = useRef(false);
    // 保存当前请求的控制器，用于取消未完成请求
    const abortControllerRef = useRef(null);
    // 保存定时器ID，用于清理
    const timerRef = useRef(null);

    const fetchData = async () => {
        // 已有请求在执行，直接跳过
        if (isFetchingRef.current) return;
        
        // 取消前一次未完成的请求（如果存在）
        if (abortControllerRef.current) {
            abortControllerRef.current.abort();
        }
        
        const controller = new AbortController();
        abortControllerRef.current = controller;
        isFetchingRef.current = true;
        setLoading(true);
        setError(null);

        try {
            const response = await fetch(url, { signal: controller.signal });
            if (!response.ok) throw new Error(`请求失败: ${response.status}`);
            const jsonData = await response.json();
            // 仅当前请求未被取消时更新数据，避免竞态
            if (!controller.signal.aborted) {
                setData(jsonData);
            }
        } catch (err) {
            // 忽略主动取消的错误
            if (err.name !== "AbortError") {
                setError(err.message);
            }
        } finally {
            // 仅当前请求未被取消时更新状态，避免被后续请求干扰
            if (!controller.signal.aborted) {
                isFetchingRef.current = false;
                setLoading(false);
                // 上一次请求完成后，启动下一轮定时请求
                timerRef.current = setTimeout(fetchData, intervalSeconds * 1000);
            }
        }
    };

    useEffect(() => {
        // 初始加载数据
        fetchData();

        // 组件卸载/依赖变化时清理资源
        return () => {
            if (abortControllerRef.current) abortControllerRef.current.abort();
            if (timerRef.current) clearTimeout(timerRef.current);
        };
    }, [url, intervalSeconds]);

    return { data, error, loading };
}

关键优化点 #

• 阻止请求重叠：通过isFetchingRef标记请求状态，发起新请求前先检查，避免并发执行。
• 精准取消旧请求：每次发起新请求时，主动取消前一次未完成的请求，彻底解决竞态条件。
• 调整轮询逻辑：放弃setInterval改用setTimeout，在上一次请求完成后再启动下一轮计时，确保请求按顺序执行，轮询间隔更符合实际需求。
• 状态更新防护：更新状态前检查当前请求是否被取消，避免已废弃的请求修改组件状态。
• 完善的清理机制：组件卸载或依赖（url/intervalSeconds）变化时，自动取消未完成请求并清除定时器，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Md Ayaan Quadri