javascript - axios react 获取实时数据展示

Question

我发出了一个 Axios get 请求来获取数据以用 react 显示它

export function Wareh() {
  const [wareh, setWareh] = useState([{}]);

  useEffect(() => {
    axios.get("http://localhost:1515/wareh").then((response) => {
      setWareh((existingData) => {
        return response.data;
      });
    });
  }, []);
  return wareh;
}

这里的问题如果我更新我的数据，我必须刷新页面才能看到更新这是我的问题:

如何让它像 r 一样，如果数据库中发生任何更改，它会反射(reflect) get 请求。

Answer 1

有 3 种方法可以实现这一点。您可以使用

1. 长池化

在这种技术中，您可以设置 Interval 并调用相同的端点来随着时间的推移刷新数据。

setInterval(() => fetchWareh(), 5000)

假设您可以将 Axios 调用转移到一个名为:fetchWareh 的函数，并每 5 秒调用一次相同的函数

1. 服务器发送事件这种方法与第一种方法非常相似。您可以从这里阅读更多信息:

https://www.w3schools.com/html/html5_serversentevents.asp

1. 在服务器和客户端实现套接字

最推荐通过socket.io获取实时数据。

Socket Documentation Here