每秒从 api 获取数据答案

【问题标题】：Fetch data from api every second每秒从 api 获取数据
【发布时间】：2021-12-21 20:51:00
【问题描述】：

我有一个 react native 应用程序，我在其中获取客户的订单并在特定屏幕的餐厅一侧显示它们，我正在使用 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]);

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

我的问题：这是执行与这种情况相同的最佳方法（在客户下订单时获取订单）还是有更好的方法来做到这一点而不会滞后因为在获取大数据时性能会保持不变还是会出现一些问题？

【问题讨论】：

我认为您不希望 CurrentOrders 作为您的 useEffect 的依赖项。可能是id，因为它被用于loadData
@Phil 感谢这个通知，我会更新我的代码，无论如何你对我的担忧有什么想法吗？谢谢。

标签： javascript react-native express react-hooks fetch

【解决方案1】：

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

【讨论】：

我同意你的观点，websocket 是这里最好的方法。但我认为这应该是评论而不是答案
我给出了这个答案，因为场景的实现不正确。它可能会破坏系统并且会花费很多（如果它是托管服务）。这里的 Websockets 将节省很多钱，而且数据的交易也很顺畅。它也可以轻松扩展。
是的，你的用例肯定需要 websocket。

【解决方案2】：

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

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

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 : []);
}

【讨论】：

实际上 id 始终保持不变，所以我认为删除 dep 是最好的方法。