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

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

我在尝试向我的API发出多个获取请求时遇到问题，导致请求暂停，在数据返回之前可能需要2分钟或更长时间。。。。在React或与邮递员一起向后端发出单个请求时，我没有任何问题

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

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

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

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

在我的每个MOVIELIST组件中，我都在对/movies/{category}进行一次fetch以获取数据

如果我只加载一个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;

---

我是新手，所以你可能不会太认真地对待我说的话

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

在仪表板中，有一个getAllMovies端点-

/movies/getAllMovies

，它在主/仪表板组件渲染时获取所有电影

在侧边栏/导航栏中为每个类别提供三个链接/按钮。创建一个端点-

/movies/categories/${category_name}

，对于您感兴趣的每个类别，将类别名称作为查询传递给端点并获取

就像@SakoBu所说的，把它放到github上并共享链接

编辑：您可以使用cors的npm包，它将为您节省大量的击键次数，并使您的代码更具可读性

---

通过在后端使用async/await解决了此问题

router.get('/thriller', auth, (req, res) => {

     await getThrillers().then(result => {
        res.send(result);
    }).catch(err => {
        console.log(err)
    });

})

async function getThrillers(){   

    let promise = new sql.ConnectionPool(config).connect().then(pool => {
        return pool.request().query(`SELECT STATEMENT`)
    }).catch(error => {
        return error
    });

    let result = await promise;        

    return result;

}

---

这是一个设计/架构问题（很可能在后端…）不是一个简单的答案。。。如果你在github上有代码，请上传链接，我会尽力帮助你…嘿，我用我的后端代码编辑了我的问题。嘿，我没有使用getAllMovies的原因是，对单个类别的查询实际上比获取类别稍微复杂一些，我不想为了在仪表板上显示某些东西而创建超级特定的端点。感谢NPMCORS软件包，这肯定会让事情变得更干净！