使用 setInterval 函数将数据获取到 React 应用程序

Question

我正在尝试将数据获取到我的反应应用程序。每秒获取数据的最佳解决方案是什么？我将它放在 setInterval 中，这可能不是最好的:) 因此，如果请求仍然处于待处理状态，例如由于连接速度慢，那么我在开发工具的网络中会有数十个待处理请求。这是我的代码。

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

    const getStaticData = async () => {
        const metadata = await fetch(process.env.REACT_APP_API_URL + '/Enumerations/venue-metadata');
        const metaJson = await metadata.json();

        setDataMeta(metaJson);
    }

    const getRefreshedData = async () => {
        const rigs = await fetch(process.env.REACT_APP_API_URL + '/Rigs');
        const games = await fetch(process.env.REACT_APP_API_URL + '/GroupSessions');
        const rigsJson = await rigs.json();
        const gamesJson = await games.json();

        setDataRigs(rigsJson);
        setDataGames(gamesJson);
    }

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

    useEffect(() => {
        let interval = setInterval(() => getRefreshedData(), (1000))

        //destroy interval on unmount
        return () => clearInterval(interval)
    }, []); `

我尝试做一些类似于 gettingRefresh 变量的事情，它在 setInterval 函数的每次迭代中，但它不起作用:(

Answer 1

您可以添加一个简单的“信号量”以避免在当前请求结束之前出现新请求。

const ref_isBusy = useRef(false);

const getRefreshedData = async () => {
    if (ref_isBusy.current) return;
    try {
        ref_isBusy.current = true;
        const rigs = await fetch(process.env.REACT_APP_API_URL + '/Rigs');
        const games = await fetch(process.env.REACT_APP_API_URL + '/GroupSessions');
        const rigsJson = await rigs.json();
        const gamesJson = await games.json();

        setDataRigs(rigsJson);
        setDataGames(gamesJson);
    }
    finally {
        ref_isBusy.current = false;
    }
}

注意

finally

，它保证“无论如何”重置标志。

这很合适，但是如果您需要严格的轮询，那么这不是最好的解决方案。也就是说，该标志仅阻止发送请求，但当计时器计时时，新请求就会到来。如果您需要响应更快的请求，则应使用

setTimeout

而不是

setInterval

。然而，这需要不同的方法。