时间戳

首页 > 解决方案 > 如何以更高效且错误更少的方式获取实时 json 数据？

javascript - 如何以更高效且错误更少的方式获取实时 json 数据？

问题描述

我正在尝试从我的反应应用程序上的服务器获取实时 JSON 数据。我写的代码很少工作，不断地无法获取，而且它向服务器创建了太多的请求，这使得浏览器真的很慢。如何以更有效且错误更少的方式获取实时数据？提前致谢。

我使用 Fetch API 和 setInterval 向服务器请求数据，并使用反应挂钩来更新数据。但它做的请求比我想象的要多，而且还出现了速度问题。

const [state, setState] = React.useState(0)

const devicePos = function () {
  fetch('http://192.168.10.233:34599/')
  .then(response => response.json())
    .then(response => {
      setState(response[0].x)
      console.log(response[0].x)
    })
  .catch(error => {
    console.log(error);
  });
}

setInterval(function(){
  devicePos()
}, 500);

我希望实时数据更新更快。

标签： javascriptreactjsfetchreal-time

解决方案

而不是把它放在 setInterval 中，异步代码应该放在 useEffect 挂钩中。在反应中，您需要在生命周期方法中进行异步调用，因为它们具有副作用，正如您可能已经经历过的那样。useEffect 挂钩类似于类中的 componentDidMount。不同之处在于它包含更多内容，这意味着它可以处理所有三种生命周期方法，componentDidMount, componentDidUpdate, componentWillUnmount 

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

这是有关其工作原理的文档

推荐阅读