南飞雁

V1

2022/07/07阅读:14主题:橙心

如何在 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...awaitsetTimeout来确保异步任务在上一个异步任务完成后再执行

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

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>

  );
};

分类:

前端

标签:

React.js

作者介绍

南飞雁
V1