- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在开发一个应用程序,该应用程序使用 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 包,它将节省您大量的击键并使您的代码更具可读性。
关于javascript - 从 React.js 向 Node.js API 发出多个请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55248897/
我有一个发出值的 Observable 源 source1,如果它没有发出任何东西超过 2 秒,我想切换到后备源 source2。如果 source1 再次发射,我想从中发射。依此类推,无限期。 到目
我正在使用 postfix 发送电子邮件。当我将电子邮件发送到其他域时它工作正常,但是当我将电子邮件发送到配置后修复的同一个域时它不发送电子邮件。 下面是我的配置: myhostname = [FQD
我最近将 ipython 和 pandas 更新为最新的稳定版本。它导致 matplotlib 中出现了一些奇怪的行为,如果我从终端运行(以前的行为)脚本,我将无法显示数字。如果我在 ipython
我的应用程序是一个网络应用程序。它的工作是接收我想将它们作为信号发出的数据包流(QByteArray)。这样做会不会效率低下?我关心复制大缓冲区。 最佳答案 QByteArray 使用 Copy-on
有 QTableWidget。我需要发送带有行列和文本的 cellChanged 信号。我怎样才能做到这一点? —— 我已经用插槽连接了信号。我需要发送 信号。 最佳答案 您必须使用 connect
我编写了一个简单的玩具语言编译器前端,它使用 llvm-sys 生成 LLVM IR (LLVM 的 C library 的 Rust 绑定(bind))。然后我通过创建 LLVMTargetMach
我想知道如何像那里描述的那样发出 HTTP POST 请求 http://code.google.com/apis/documents/docs/3.0/developers_guide_protoc
简单的问题。我需要在 GWT 中发出一个重定向到新页面的 GET 请求,但我找不到正确的 API。 有吗?我应该自己简单地形成 URL 然后做 Window.Location.replace ? (原
我正在使用 paging3我有两个不同的寻呼源。问题是Coroutine Scope只发出第一个寻呼流 在 ViewModel我有两个分页流程 val pagingFlow1 = Pager(Pagi
docker doc 中没有任何解释,也没有 docker 中看似任何内置变量来查找构建图像的原始工作目录。 我想在不同的目录上运行命令,并在某个时候回到我启动 docker build 的位置。 我
我试图使一个puppeteer.js机器人能够暂停并恢复其工作。 总的来说,我有一个带有十几个异步方法的类,事件发射器和一个名为“state”的属性,该属性使用setter进行更改。当我发生事件“停止
这个问题已经有答案了: Is it possible to send custom headers with an XHR ("Ajax" request)? (1 个回答) 已关闭 4 年前。 我想
如果浏览器打开与远程服务器的连接,是否可以通过 Javascript 访问同一连接? 我的网络上有一个小型以太网模块,我的编程有点像这样(伪代码): private var socket while(
尝试发出 HTTP 请求时,出现错误: {-# LANGUAGE OverloadedStrings #-} import Network.HTTP.Conduit -- the main modul
我有这个异步任务: public class likeTheJoke extends AsyncTask{ @Override protected Void doInBa
当进程终止并为其发出 wait() 时会发生什么?当一个子进程终止但没有人为其执行 wait() 时会发生什么?如果对尚未终止的进程执行 wait() 会发生什么情况? 最佳答案 如果我误解了这些问题
我尝试使用以下小部件结构、信号连接和回调将与 GtkTextView 支持的击键相关的信号(CTRL+a、CTRL+x 等)附加到工具栏按钮: typedef struct { GtkWidg
我有以下 base64 编码的字符串,我需要使用 Swift 对它进行 base64 解码: KimHser2RvFf9RPjajWO4K/odT51hTlISwMKNIfPUC+gXYZKNjGDC
我正在使用 Facebook Messenger webview 显示表单,在提交时,我想将消息发送回用户并关闭 webview。我现在的问题是 webview/浏览器没有发送消息就关闭了。我不知道这
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我是一名优秀的程序员,十分优秀!