從React.js向Node.js API發出多個請求

Question

我目前正在開發一個使用Node.js REST后端與客戶端上的React.js的應用程序。

嘗試向我的API發出多個提取請求時遇到問題，導致請求停止，這可能需要長達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;

Answer 1

我是開發中的新手，所以您可能不太重視我所說的話。

我認為您在獲取數據時做的太多了。 您可以獲取儀表板中的所有電影，但要確保所有電影都具有類別，然后使用單個終結點根據傳入類別名稱作為查詢的類別來獲取電影。

在儀表板中，有一個getAllMovies端點- /movies/getAllMovies當Home / Dashboard組件渲染時，該端點將提取所有電影。

邊欄/導航中的每個類別都有三個鏈接/按鈕。 創建單個端點- /movies/categories/${category_name} ，對於您感興趣的每個類別，將類別名稱作為查詢傳遞給端點並獲取。

就像@SakoBu所說的那樣，將其放在github上並共享鏈接。

編輯：有一個可用於cors的npm軟件包，它將為您節省大量的擊鍵次數，並使代碼更具可讀性。

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;

}