如何在 React 中更好地轮询 API？

本篇通译自 https://blog.devgenius.io/how-to-better-poll-apis-in-react-312bddc604a4 作者: Zachary Lee

替代 setInterval，间隔调用异步方法的更好解决方案

在 Web 开发中，我们可能需要不断地轮询后端 API 以获取页面上要更新的最新数据。虽然 WebSocket 是更好的选择，但在某些情况下轮询也可以。

那么如何在 React 中做到这一点呢？

setInterval

我们可以使用 setInterval 连续执行 async 方法，这可能是最简单的解决方案。

const App = () => {
  const [origin, setOrigin] = useState('');
  const updateState = useCallback(async () => {
    const response = await fetch('https://httpbin.org/get');
    const data = await response.json();
    setOrigin(data?.origin ?? '');
  }, []);
  useEffect(() => {
    setInterval(updateState, 3000);
  }, [updateState]);
  return <main>{`Your origin is: ${origin}`}</main>;
};

但是这个解决方案有一些问题。首先setInterval是不准确的, 二是粒度不易控制，造成浪费。例如，对于一个响应时间较长的 API 请求，上一次响应的内容在页面上还没有更新，下一个请求会重新发送。

这并不理想。

setTimeout + async…await

我们可以使用setTimeoutand async...await来实现一个自定义钩子：

const useIntervalAsync = (fn: () => Promise<unknown>, ms: number) => { 
  const timeout = useRef<number>();
  const run = useCallback(async () => { 
    await fn(); 
    timeout.current = window.setTimeout(run, ms); 
  }, [fn, ms]);
  useEffect(() => { 
    run(); 
    return () => { 
      window.clearTimeout(timeout.current); 
    }; 
  }, [run]); 
};

接下来，它是这样使用的：

const App = () => {
  const [origin, setOrigin] = useState('');
  const updateState = useCallback(async () => {
    const response = await fetch('https://httpbin.org/get');
    const data = await response.json();
    setOrigin(data?.origin ?? '');
  }, []);
  useIntervalAsync(updateState, 3000);
  return <main>{`Your origin is: ${origin}`}</main>;
};

此解决方案使用async...await和setTimeout来确保异步任务在上一个异步任务完成后再执行

但是异步任务总是很棘手。想象一个案例：如果使用这个钩子的组件在等待异步响应时被卸载，那么这个定时任务将一直在后台运行。这是一个严重的错误，我们可以通过记录挂载状态来避免这种情况。

const useIntervalAsync = (fn: () => Promise<unknown>, ms: number) => {
  const timeout = useRef<number>();
  const mountedRef = useRef(false);
  const run = useCallback(async () => {
    await fn();
    if (mountedRef.current) {
      timeout.current = window.setTimeout(run, ms);
    }
  }, [fn, ms]);
  useEffect(() => {
    mountedRef.current = true;
    run();
  return () => {
      mountedRef.current = false;
      window.clearTimeout(timeout.current);
    };
  }, [run]);
};

可以通过记录mountedRef. 很简单，对，但其实很实用，当然你也可以把mounted状态做成自定义hook，方便复用。例如useMountedState下面：

import { useCallback, useEffect, useRef } from 'react';
const useMountedState = () => {
  const mountedRef = useRef(false);
  const getState = useCallback(() => mountedRef.current, []);
  useEffect(() => {
    mountedRef.current = true;
  return () => {
      mountedRef.current = false;
    };
  }, []);
  return getState;
};
export default useMountedState;

复杂案例

在一些比较复杂的情况下，我们可能需要主动更新页面信息。例如，在一些交互之后，我希望updateState立即调用以更新页面上的最新数据。

当然我可以updateState直接调用，但是下一个定时任务可能会执行的很快，很浪费。所以我们可以添加一些特性来useIntervalAsync让它支持刷新。

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

const useIntervalAsync = <R = unknown>(fn: () => Promise<R>, ms: number) => {
  const runningCount = useRef(0);
  const timeout = useRef<number>();
  const mountedRef = useRef(false);

  const next = useCallback(
    (handler: TimerHandler) => {
      if (mountedRef.current && runningCount.current === 0) {
        timeout.current = window.setTimeout(handler, ms);
      }
    },
    [ms],
  );

  const run = useCallback(async () => {
    runningCount.current += 1;
    const result = await fn();
    runningCount.current -= 1;

    next(run);

    return result;
  }, [fn, next]);

  useEffect(() => {
    mountedRef.current = true;
    run();

    return () => {
      mountedRef.current = false;
      window.clearTimeout(timeout.current);
    };
  }, [run]);

  const flush = useCallback(() => {
    window.clearTimeout(timeout.current);
    return run();
  }, [run]);

  return flush;
};

export default useIntervalAsync;

可以看到我们已经添加了flush方法。它的内部逻辑是取消下一个定时任务，run直接执行该方法。

但是我们添加了一个runningCount，这是为了什么？

想象一个案例：当钩子在内部run以正常的逻辑间隔执行函数时，而异步响应正在等待解决，flush被外部调用以期望立即执行，然后run将再次执行。这是因为最后一个run还没有解决，最新的计划任务还没有创建，所以不能取消。

也就是说，run此时有两个函数正在执行，虽然这并不关键，但是如果我们仍然使用前面的逻辑，那么这两个run在解决后会创建两个定时任务。这会导致更大的浪费。

所以我们可以使用runningCount来记录当前的执行次数，并在函数中保证只有在是下一个任务时才创建新的定时任务。runningCount 0

另外，通过 TypeScript 的泛型，我们可以很方便的包装原有的函数以适应更多的情况。一个简单的例子：

const App = () => {
  const [origin, setOrigin] = useState('');
  const updateState = useCallback(async () => {
    const response = await fetch('https://httpbin.org/get');
    const data = await response.json();
    setOrigin(data?.origin ?? '');
  }, []);
  const update = useIntervalAsync(updateState, 3000);
  return (
    <main>
      <div>{`Your origin is: ${origin}`}</div>
      <button onClick={update}>update</button>
    </main>
  );
};

本文由 mdnice 多平台发布