React应用每秒获取数据最优方案：解决setInterval请求堆积问题

你用setInterval轮询遇到的请求堆积问题，核心原因是定时器不管前一次请求是否完成，都会按时触发下一次请求，网络延迟时就会导致大量pending请求堆积。改用递归式setTimeout是最优解，它会等上一次请求（成功或失败）完成后，再延迟发起下一次请求，彻底解决这个问题。

修改后的实现代码 #

import { useState, useEffect } from 'react';

// 假设MetaType是你定义的类型
type MetaType = { /* 你的类型定义 */ };

const YourComponent = () => {
    const [dataRigs, setDataRigs] = useState<[]>([]);
    const [dataGames, setDataGames] = useState<[]>([]);
    const [dataMeta, setDataMeta] = useState<MetaType>({});

    const getStaticData = async () => {
        try {
            const metadata = await fetch(`${process.env.REACT_APP_API_URL}/Enumerations/venue-metadata`);
            const metaJson = await metadata.json();
            setDataMeta(metaJson);
        } catch (err) {
            console.error('获取静态数据失败:', err);
        }
    };

    const getRefreshedData = async () => {
        try {
            // 并行发起两个请求，缩短整体耗时
            const [rigsRes, gamesRes] = await Promise.all([
                fetch(`${process.env.REACT_APP_API_URL}/Rigs`),
                fetch(`${process.env.REACT_APP_API_URL}/GroupSessions`)
            ]);
            const rigsJson = await rigsRes.json();
            const gamesJson = await gamesRes.json();
            
            setDataRigs(rigsJson);
            setDataGames(gamesJson);
        } catch (err) {
            console.error('获取刷新数据失败:', err);
        }
    };

    useEffect(() => {
        getStaticData();
    }, []);

    useEffect(() => {
        let isMounted = true;
        let timeoutId: NodeJS.Timeout;

        const pollData = async () => {
            await getRefreshedData();
            // 组件未卸载时，延迟1秒发起下一次请求
            if (isMounted) {
                timeoutId = setTimeout(pollData, 1000);
            }
        };

        // 启动第一次轮询
        timeoutId = setTimeout(pollData, 0);

        // 组件卸载时清理定时器，避免内存泄漏
        return () => {
            isMounted = false;
            clearTimeout(timeoutId);
        };
    }, []);

    // ... 组件渲染逻辑
    return <div>/* 你的组件内容 */</div>;
};

export default YourComponent;

关键优化点 #

• 递归setTimeout替代setInterval：确保每次请求完成后才触发下一次，彻底避免请求堆积。
• Promise.all并行请求：将原来的串行请求改为并行，减少整体请求耗时。
• 组件卸载安全控制：用isMounted变量防止组件卸载后执行setState引发警告，同时清理未触发的定时器。
• 错误捕获：给请求加上try/catch，避免单次请求失败导致整个轮询中断，同时方便排查问题。

额外可选优化 #

• 动态调整轮询间隔：如果请求返回的数据没有变化，可以临时延长间隔，减少不必要的请求；数据更新时再恢复1秒间隔。
• 请求重试逻辑：针对偶尔的请求失败，增加1-2次重试，提升轮询稳定性。

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