时间戳

首页 > 解决方案 > 从 React.js 向 node.js API 发出多个请求

javascript - 从 React.js 向 node.js API 发出多个请求

问题描述

我目前正在开发一个应用程序，它在客户端使用 Node.js REST 后端和 React.js。

我在尝试向我的 API 发出多个 fetch 请求时遇到问题，导致请求停止，这可能需要 2 分钟或更长时间才能返回数据......我没有问题向后面发出单个请求- 以 React 或 Postman 结束。

我的后端“/movies/{category}”中有一个端点，它根据所选类别返回电影列表。例如

/movies/horror
/movies/thriller
/movies/comedy

在我的 React 应用中，组件结构如下：

APP
-- DASHBOARD
-- -- MOVIELIST (horror)
-- -- MOVIELIST (thriller)
-- -- MOVIELIST (comedy)

在我的每个 MOVIELIST 组件中，我都在获取 /movies/{category} 以获取数据。

如果我只加载一个 MOVIELIST 组件，我没有问题。但是，一旦我尝试加载多个，请求就会开始停止。

我已经在 Chrome、FireFox 和 IE 中尝试过此操作，并且这三个都发生了问题。

这是 chrome 中停止请求的示例： 在此处输入图像描述

任何帮助，将不胜感激。谢谢！

-

更新：

这是我的后端的设置方式

// index.js
const express = require('express');
const router = express.Router();

const app = express();    

const movies = require('./routes/movies');

app.use(express.json());
app.use('/api/movies', movies);

const port = process.env.PORT || 5000;    
app.listen(port, () => console.log(`Listening on port ${port}...`));

然后是我的电影终点

//movies.js
const express = require('express');
const router = express.Router();
const moment = require('moment');
const sql = require('mssql');
const _ = require('lodash');

const config = require('../config/config');

//For CORS
router.options('/*', (req, res) => {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', "GET, POST, PUT");
    res.header('Access-Control-Allow-Headers', ['Content-Type', 'x-access-token']).send();
});

router.get('/horror', auth, (req, res) => {
sql.connect(config).then(pool => {
        return pool.request().query(
            `SELECT STATEMENT`
        );
    }).then(result => {    
        sql.close();
        res.header('Access-Control-Allow-Origin', "*");
        res.header('Access-Control-Allow-Methods', "GET, POST, PUT");
        res.header('Access-Control-Allow-Headers', ['Content-Type', 'x-access-token']);
        return res.send(result);    
    }).catch(err => {
        sql.close();
        res.header('Access-Control-Allow-Origin', "*");
        res.header('Access-Control-Allow-Methods', "GET, POST, PUT");
        res.header('Access-Control-Allow-Headers', ['Content-Type', 'x-access-token']); 
        return res.send(err);
    });
})

router.get('/thriller', auth, (req, res) => {
    sql.connect(config).then(pool => {
            return pool.request().query(
                `SELECT STATEMENT`
            );
        }).then(result => {           
            sql.close();
            res.header('Access-Control-Allow-Origin', "*");
            res.header('Access-Control-Allow-Methods', "GET, POST, PUT");
            res.header('Access-Control-Allow-Headers', ['Content-Type', 'x-access-token']);
            return res.send(result);        
        }).catch(err => {
            sql.close();
            res.header('Access-Control-Allow-Origin', "*");
            res.header('Access-Control-Allow-Methods', "GET, POST, PUT");
            res.header('Access-Control-Allow-Headers', ['Content-Type', 'x-access-token']); 
            return res.send(err);
        });
    })

router.get('/comedy', auth, (req, res) => {
    sql.connect(config).then(pool => {
            return pool.request().query(
                `SELECT STATEMENT`
            );
        }).then(result => {        
            sql.close();
            res.header('Access-Control-Allow-Origin', "*");
            res.header('Access-Control-Allow-Methods', "GET, POST, PUT");
            res.header('Access-Control-Allow-Headers', ['Content-Type', 'x-access-token']);
            return res.send(result);        
        }).catch(err => {
            sql.close();
            res.header('Access-Control-Allow-Origin', "*");
            res.header('Access-Control-Allow-Methods', "GET, POST, PUT");
            res.header('Access-Control-Allow-Headers', ['Content-Type', 'x-access-token']); 
            return res.send(err);
        });
    })

module.exports = router;

标签： javascriptnode.jsreactjsapifetch

解决方案

我是新开发的，所以你可能会不太认真地对待我所说的。

我认为您在获取数据时做得太多了。您可以在仪表板中获取所有电影，但要确保所有电影都有类别，然后使用单个端点根据传递类别名称作为查询的类别来获取电影。

在仪表板中，有一个 getAllMovies 端点 -/movies/getAllMovies在 Home/Dashboard 组件呈现时获取所有电影。

侧边栏/导航中的每个类别都有三个链接/按钮。创建一个端点 -/movies/categories/${category_name}对于您感兴趣的每个类别，将类别名称作为查询传递给端点并获取。

就像@SakoBu 说的把它放在github 上并分享链接。

编辑：你可以使用一个用于 cors 的 npm 包，它将为你节省大量的击键并使你的代码更具可读性。

https://github.com/expressjs/cors

推荐阅读