从Node.js中的API获取数据并将其发送到Reactjs

如何解决从Node.js中的API获取数据并将其发送到Reactjs

我正在尝试从Nodejs中的API获取数据，然后将数据发送到Reactjs。我无法直接在Reactjs中获取数据，因为我需要提供API密钥，因此，我正在使用Nodejs。我正在使用Axios来获取数据。问题在于，由于Axios仅在完全获取所有数据后才发送数据，因此显示数据需要3到4秒以上，这不是很好。我想知道如何在每个间隔之后或在Axios提取某些数据后立即显示数据，继续显示并同时加载其余部分。我在后端的代码是

const express = require('express');
const axios = require('axios');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/getdata',function (req,res) {
    const fetchData = async () => {
        const data = await axios(`${APIurl}?${APIKey}`)
        res.send(data.data);
    }
    fetchData();
})

app.listen(5000);

Reactjs部分的代码是这样的。

import React,{ useState,useEffect } from 'react'
import axios from 'axios';
const Projects = () => {
    const [data,updateData] = useState([]);
    useEffect(() => {
        axios.get('http://localhost:5000/getdata')
            .then(res => updateData(res.data))
            .catch(error => console.log("Error"))
    },[])
   
    return (
            {data.map(project => (
                 <div key={project["id"]}>
                      <div>{project["name"]}</div>
                 </div>
             ))}
    )
}

export default Projects

那么我该如何从后端代码发送数据，以便在每个特定间隔后显示数据？

解决方法

似乎是WebSocket或WebSocketStream API的好用例。

实现细节将在很大程度上取决于您是否想自己实现其中任何一个，还是要使用某些库/服务（例如socket.io），以及这两个API中哪一个最适合您的项目