每秒从 api 中获取数据

Question

我有一个反应本机应用程序，我在其中获取客户的订单并将其显示在特定屏幕的餐厅端，我正在使用 fetch api 来获取数据，所以工作流程是客户首先下订单并将其存储在数据库中，在餐厅方面我有这个功能：

  const loadData = async () => {
        const response = await fetch(`${API_URL}/getActiveOrders?ID=${id}`);
        const result = await response.json();
        if (result.auth === true) {

                setCurrentOrders(result.data)

        } else {
            setCurrentOrders([])
        }
    }

    useEffect(() => {
        const interval = setInterval(() => {
            loadData();
        }, 1000)
        return () => clearInterval(interval)
    }, [id]);

因为在这个函数中，它每秒运行一次，它使 api 调用快递服务器从数据库中获取数据，这样我就可以让餐厅毫不延迟地接收订单。但我注意到当间隔设置为 1 秒时应用程序会滞后，并且它会不断频繁地调用快速服务器。

我的问题：这是执行与此场景相同的最佳方法吗（在客户下订单的那一刻获取订单）或者是否有更好的方法它没有滞后以及在获取大数据时性能会保持不变还是会出现一些问题？

Answer 1

在这种情况下，您应该使用 websockets。这是使用 websockets 的最佳场景。你的场景就像一个交易网站。

Answer 2

如果我不得不猜测滞后问题的原因是什么，那将是因为您依赖于 useEffect 挂钩。每次状态更新时，它都会再次触发另一个渲染和效果运行s，并设置另一个间隔，您的应用程序每秒执行一次。

我建议去掉依赖，运行只在组件挂载时取消一次效果，卸载时清除间隔

useEffect(() => {
  const interval = setInterval(() => {
    loadData();
  }, 1000)
  return () => clearInterval(interval)
}, []);

如果 GET 请求的 id 更新并且您需要最新值，则使用 React ref 存储 id 值并在请求 URL 中使用它。

const idRef = React.useRef(id);

useEffect(() => {
  idRef.current = id;
}, [id]);

const loadData = async () => {
  const response = await fetch(`${API_URL}/getActiveOrders?ID=${idRef.current}`);
  const result = await response.json();
  setCurrentOrders(result.auth ? result.data : []);
}

每秒从 api 中获取数据

Fetch data from api every second

javascript

fetch

express

react-native

react-hooks