Angular HTTPClient (HTTP) 请求永远挂起

Posted 2023-02-24

【中文标题】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])更容易。