Выполнение нескольких запросов к API node.js из React.js

Question

В настоящее время я разрабатываю приложение, которое использует серверную часть REST Node.js с React.js на стороне клиента.

У меня возникают проблемы при попытке сделать несколько запросов на выборку к моему API, что приводит к зависанию запросов, которые могут занять до 2 минут или более, прежде чем данные вернутся .... У меня нет проблем с выполнением единичных запросов к серверной части в React или с Postman.

Iесть конечная точка в моем бэк-энде "/ 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;

Answer 1

Я новичок в разработке, поэтому вы можете воспринимать то, что я говорю, не очень серьезно.

Я думаю, что вы делаете слишком много при получении данных. Вы можете получить все фильмы на панели инструментов, но убедитесь, что у всех фильмов есть категории, а затем использовать одну конечную точку для извлечения фильмов на основе категорий, передающих имя категории в качестве запроса.

На панели мониторинга есть конечная точка getAllMovies - /movies/getAllMovies, которая выбирает все фильмы при рендеринге компонента Home / Dashboard.

Есть три ссылки / кнопки для каждой категории на боковой панели / навигации. Создайте одну конечную точку - /movies/categories/${category_name}, для каждой категории, которая вас интересует, передайте имя категории в качестве запроса к конечной точке и получите.

Как сказал @SakoBu, поместите его на github и поделитесь ссылкой.

Edit: есть пакет npm для cors, который вы можете использовать, он сэкономит вам массу нажатий клавиш и сделает ваш код более читабельным.

https://github.com/expressjs/cors

Answer 2

Эта проблема была исправлена ​​с помощью 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;

}