Angular HTTPClient (HTTP) 请求永远挂起
Posted
技术标签:
【中文标题】Angular HTTPClient (HTTP) 请求永远挂起【英文标题】:Angular HTTPClient (HTTP) requests pending forever 【发布时间】:2020-01-31 17:23:35 【问题描述】:我最近开始使用 mysql 作为我的 Angular/NodeJS 项目的数据库(我一直在使用 MongoDB)。尽管如此,我在处理 HTTP 请求时遇到了问题。到目前为止,我已经尝试过 GET 和 POST 请求,并且 GET 永远处于挂起状态,直到失败并且 POST 也同样不会发布到后端和数据库。当然,除了查询之外,我确实没有更改用于 MongoDB 数据库的后端配置。
我已尝试调试后端以检查服务器是否实际运行并且一切正常。只是请求到达指定的端点,它们始终处于挂起状态。如果请求到达某个端点,我也尝试登录到控制台,但不幸的是,没有记录任何内容。
server.js
const app = require("./backend/app");
const debug = require("debug")("node-angular");
const http = require("http");
const normalisePort = setPort =>
const port = parseInt(setPort, 10);
if (isNaN(port)) return setPort;
if (port >= 0) return port;
return false;
;
const port = normalisePort(process.env.PORT || "8000");
const server = http.createServer(app);
const error = error =>
if (error.syscall !== "listen")
throw error;
const bind = typeof port === "string" ? "pipe " + port : "port " + port;
switch (error.code)
case "EACCES":
console.error(bind + " requires elevated privileges");
process.exit(1);
break;
case "EADDRINUSE":
console.error(bind + " is already in use");
process.exit(1);
break;
default:
throw error;
;
const listening = () =>
const address = server.address();
const bind = typeof port === "string" ? "pipe " + address : "port " + port;
debug.enabled = true;
debug("Listening on " + bind);
;
app.set("port", port);
server.on("error", error);
server.on("listening", listening);
server.listen(port, "localhost");
app.js
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const users = require("./routes/users");
const app = express();
app.use(cors);
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded(
extended: false
)
);
app.use((req, res, next) =>
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Authorization, Content-Type, Accept"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PATCH, DELETE, OPTIONS"
);
next();
);
app.get("/api/users", users);
module.exports = app;
users.js
const express = require("express");
const router = express.Router();
const db = require("../sql-connection");
router.get("", (req, res, next) =>
db.query("select * from users;", (error, results, fields) =>
if (results.length > 0)
return res.status(200).send(results);
else
return res.status(404).send();
);
);
module.exports = router;
sql-connection.js
const mysql = require("mysql");
const sqlConnection = mysql.createConnection(
host: "localhost",
user: "root",
password: "",
database: "payroll"
);
sqlConnection.connect(error =>
if (error) throw error;
console.log("connected to database");
);
module.exports = sqlConnection;
auth.service.ts
export class AuthService
private _BASE_URL: string = "http://localhost:8000/api";
constructor(private http: HttpClient)
public get users(): Observable<any>
return this.http.get(this._BASE_URL + "/users");
signup.component.ts
export class SignUpComponent
constructor(private _authService: AuthService)
public onSignUp(): void
this._authService
.users()
.subscribe(data => (data ? console.log(data) : console.log("no data")));
从后端订阅用户可观察数据时,如果存在,应记录到控制台,否则,控制台上会记录“无数据”。不幸的是,这个请求需要很长时间(待处理)。但是,如果我不订阅用户,则不会在开发工具的网络选项卡下发送/看到任何请求。
【问题讨论】:
您是否在 users.js 数据库查询中记录了错误/结果? 请求是否直接向 API 发出请求,例如使用邮递员? @JDunken,db 查询没有记录任何内容、错误、结果等等!我希望如果端点收到请求,查询会记录一些东西,但事实并非如此。不过感谢您的建议! @LuizFernandodaSilva,我真的没有用过 Postman,但我想我可以试试看会发生什么。谢谢! 这表明您没有解决您认为的端点。按照@LuizFernandodaSilva 的建议并使用邮递员来验证您的请求。 【参考方案1】:我一直在使用 MYSQL 数据库,我建议使用 mysql2
而不是 mysql
mysql2
提供基于 promise 的语法,而不是传统的回调方法。
Here's the documentation for Mysql2 for nodejs.
谈到这个问题,我想这可能是因为 Nodejs 是异步的,而您在设置 API 时使用的是同步方法。
此外,当您使用异步编程时,您必须使用 try-catch-finally
而不是传统的 if-else
语句来记录错误。
因此您可以使用async (req, res, next)=> //your code here
而不仅仅是使用(req, res, next)=> //your code here
。
您还必须在调用 sql 查询之前await
,即;
await db.query
或
在mysql2中使用const [data] = await pool.execute(query, [params])
更容易。
【讨论】:
以上是关于Angular HTTPClient (HTTP) 请求永远挂起的主要内容,如果未能解决你的问题,请参考以下文章
Angular HttpClient“解析期间的Http失败”
Angular HTTPClient (HTTP) 请求永远挂起
Angular4从Http迁移到HttpClient - 使用凭据