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

【问题标题】：Fetch data from API in Node.js and send to Reactjs从 Node.js 中的 API 获取数据并发送到 Reactjs
【发布时间】：2020-08-30 13:42:35
【问题描述】：

我正在尝试从 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

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

【问题讨论】：

标签： javascript node.js reactjs axios mern

【解决方案1】：

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

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

【讨论】：