[英]Making multiple requests to node.js API from React.js
我目前正在开发一个使用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中进行了尝试,而这三个问题均会发生。
任何帮助,将不胜感激。 谢谢!
-
更新:
这是我的后端设置方法
// 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
当Home / Dashboard组件渲染时,该端点将提取所有电影。
边栏/导航中的每个类别都有三个链接/按钮。 创建单个端点- /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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.