使用Node.js从MongoDB获取数据时浏览器持续加载无响应问题排查

我帮你排查了代码里的几个关键问题，这些问题导致你的接口一直处于加载状态，没法返回响应，下面是具体的修复方案：

1. MongoDB连接字符串有误且未处理连接失败 #

你写的mongoose连接字符串少了mongodb://协议前缀，而且没加连接失败的错误处理。要是数据库连不上，后面的查询操作就会一直挂着，直接导致接口超时。

修复后的连接代码：

mongoose.connect('mongodb://localhost:27017/books')
  .then(() => console.log("connected successfully to database !"))
  .catch(err => console.error("Database connection failed:", err));

2. 路由查询出错时没给客户端返回响应 #

在你的路由代码里，当BookModel.find触发错误时，只在控制台打了日志，但没给浏览器返回任何响应。这就会让请求一直处于等待状态，浏览器自然会持续加载。

修复后的路由代码：

mongoose = require('mongoose') ; 
const express = require('express') ; 
const BookModel = require('../models/bookModel'); 
const booksRoute = express.Router() ; 

booksRoute.route('/').get((req,res)=>{ 
  BookModel.find((error,data)=>{ 
    if (error){ 
      console.log("an error occurred while retrieving data !") ; 
      // 新增：返回错误响应给客户端
      return res.status(500).json({ error: "Failed to fetch books: " + error.message });
    } else{ 
      res.json(data) ; 
    } 
  }) 
}) ; 

module.exports = booksRoute ;

3. 中间件顺序不符合最佳实践 #

你把路由挂载app.use('/api',booksRoute)放在了cors()和body-parser中间件的前面，这会导致路由里的请求没法用到跨域支持和请求体解析的功能（虽然当前是GET请求，但后续如果加POST接口肯定会出问题），而且也不符合Express中间件的执行顺序规则。

修复后的主文件完整代码：

const express = require("express") ; 
const mongoose = require("mongoose") ; 
const cors = require('cors') ; 
const path = require('path') ; 
const bodyParser = require('body-parser') ; 
const app = express() ; 
const port = 3000 ; 
const booksRoute = require('./routes/api') ; 

// 先加载核心中间件
app.use(cors()) ; 
app.use(bodyParser.json()) ; 
app.use(bodyParser.urlencoded({ extended:false })) ; 

// 再挂载API路由
app.use('/api',booksRoute) ; 

// 最后处理静态文件
app.use(express.static(path.join(__dirname,'dist/smart-bookshelf'))) ; 
app.use('/',express.static(path.join(__dirname,'dist/smart-bookshelf'))) ; 

// 数据库连接（带错误处理）
mongoose.connect('mongodb://localhost:27017/books')
  .then(() => console.log("connected successfully to database !"))
  .catch(err => console.error("Database connection failed:", err));

const server = app.listen(3000,()=>{console.log("server is working correctly on port : "+port)}) ; 

// 全局错误处理中间件
app.use(function (err, req, res, next) { 
  console.error(err.message); 
  if (!err.statusCode) err.statusCode = 500; 
  res.status(err.statusCode).send(err.message); 
});

做完这些修改后，重启你的Express服务器，再访问接口应该就能正常返回书籍数据，或者如果还有问题，也会返回明确的错误信息，方便你进一步排查。

内容的提问来源于stack exchange，提问作者Mohamed Ali Mani