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

Question

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

我使用 Fetch API 和 setInterval 向服务器请求数据，并使用 react hooks 更新数据。但是它做的请求比我想象的要多，而且还会出现速度问题。

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);

希望实时数据更新快点

Answer 1

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

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

Here is the docs as to how it works

Answer 2

您可以让它仅在响应返回时重新提交提取（加上一些延迟）。

const devicePos = () => {
   fetch()
      .then( res => res.json() )
      .then( res => {
         updateData();
      } )
      .catch( err => {
         showError(err);
      })
      .finally( () => {
         setTimeout( devicePos, 500 );
      })
}

否则，您可能最终会陷入太慢的服务器。

finally确保无论api响应（或超时）如何，都会再次发送请求。

Answer 3

我认为 setInterval 不是轮询数据的好方法。某些响应可能会慢于 500 毫秒，您可能会在稍后获得较旧的结果。

无论何时轮询，您都应该等待上一个响应。

const [state, setState] = React.useState(0)
const [timer, setTimer] = React.useState(null)
const [isMounted, setIsMounted] = React.useState(false)

async function updateDevicePosition () {
  try {
    const result = await fetch('http://192.168.10.233:34599/')
    const data = await result.json()
    setState(data.x)
  } catch (e) {
    console.error(e)
  }
  clearTimeout(timer)
  setTimer(setTimeout(updateDevicePosition, 200))
}

useEffect(() => {
  if (!isMounted) {
     updateDevicePosition()
     setIsMounted(true)
  }
})

话虽这么说，但对此类工作的要求很多。首选方法应该是使用服务器引导数据的套接字，并且仅在设备位置更改时才向您的客户端发送消息。根据您使用此位置信息的时间，您的应用将使用大量资源

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

How can I fetch the real-time json data in more efficient and less buggy way?

javascript

real-time

fetch

reactjs