Axios实时数据的GET请求

Question

为简单起见，假设我拥有一个名为“用户”的实体，在我的前端（React）中，我正在使用Axios进行get请求以获取所有用户并将其显示。

在componentDidMount中，我执行了一个get请求const res = axios.get(myurl)，然后映射res以便显示。

但是，如果在数据库中输入新用户，则必须刷新页面才能查看更新内容。

我的问题是：如何使得这个get请求一直运行或者类似于此的方式，以便如果数据库中发生任何更改，则反映在get请求中。

- Yahia Badr

---

请了解Websockets并基于事件推送数据（例如：添加用户）。目前，它是基于拉取的（当页面加载时，您会拉取所有用户）。 - Shivam Gupta

如果您在componentDidUpdate中进行axios get请求并在其中更新状态。当状态改变时，组件将重新渲染，您无需刷新页面。但我认为这不是正确的方法，但您可以尝试。此外，您必须使用redux，否则它将无法正常工作。 - Pawan Sah

Answer 1

您可以在React中使用useEffect函数。

import React,{useEffect}from 'react'

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

useEffect(()=>{
        getAllUsers();

    })

- Mat Mitcheil Ando

---

{"message": "未捕获的语法错误：无法在模块外部使用import语句", "filename": "https://stacksnippets.net/js", "lineno": 12, "colno": 9} 您正在浏览器环境中使用import。请将其更改为CommonJS。 - Tom Epsilon

Answer 2

这是实时更新，我们有多种处理此类情况的方法。

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

第一种做法

• 是使用实时库（例如Socket.io），这样您可以侦听所需的事件。 您可以在这里找到一个使用Node.JS和React.JS的示例。

第二种做法

• 是使用提供实时更新的数据库，例如Firebase。这里您可以找到一个示例。

- Yahia Naguib