axios 获取实时数据请求

Posted 2023-02-22

【中文标题】axios 获取实时数据请求

【英文标题】：axios get request for real-time data

【发布时间】：2019-11-22 13:10:39

【问题描述】：

为简单起见，假设我有实体用户，并且在我的前端（反应）我正在发出 Axios 获取请求以让所有用户显示它们。

在componentDidMount 我正在做一个获取请求const res = axios.get(myurl) 然后映射res 以显示。

但是，如果在数据库中输入了新用户，我必须刷新页面才能看到更新。

这是我的问题，如何使 get 请求像运行或类似的东西，所以如果数据库中发生任何更改，它会反映 get 请求。

【问题讨论】：

查看 websockets 并根据事件推送数据（例如：添加用户）现在，它是基于拉取的（当页面加载时，您拉取所有用户）。

如果您在 componentDidUpdate 中执行 axios 获取请求并更新其中的状态。当状态发生变化时，组件将重新渲染，您不必刷新页面。但我不认为这是写方式，但你可以试试。你也必须使用 redux 否则它不会工作。

【参考方案1】：

这是实时更新，针对这种情况我们有多种做法。

在阅读答案之前，您需要知道这个案例是关于实时更新的概念，而不是一行代码解决方案的问题。你需要在你的应用中实现实时系统来实现你想要的。

第一次练习

就是使用像Socket.io这样的实时库，让你可以监听你想要的事件。 你可以找到 here 一个 Node.JS 和 React.JS 的例子

第二次练习

是使用像 Firebase 这样提供实时更新的数据库。 Here你可以找到一个例子。

【参考方案2】：

你可以在 react 中使用 useEffect

import React,useEffectfrom 'react'

function getAllUsers()
    //your code here...


useEffect(()=>
        getAllUsers();

    )

【讨论】：

"message": "Uncaught SyntaxError: Cannot use import statement outside a module","filename": "https://stacksnippets.net/js","lineno": 12,"colno": 9 您在浏览器环境中使用import。将其更改为 CommonJS。