Express无法在localhost显示求助：无报错但页面加载停滞

问题描述 #

我是Express初学者，此前连接localhost一切正常，但现在出现问题：控制台无报错、日志显示正常，但页面卡在加载状态无任何提示。想知道问题出在代码脚本还是网络？

我的代码 #

const bodyParser = require('body-parser')
const express = require('express')
const app = express()
console.log("ff")
const mongoose=require('mongoose')  
mongoose.set('strictQuery',false)
require('dotenv/config')

const db=mongoose.connection
db.on('error',(error)=>console.error(error))
db.once('open',()=> console.log('connect to db'))

mongoose.connect(
    process.env.DB_CONNECTION
    ,{ useNewUrlParser:true })
app.use(logger)
app.use(bodyParser.json)
app.get('/',logger,(req,res)=>{
    console.log("ddd")
    //res.status(500)
    res.json({ username : "alex"})

})

const userRouter = require('./routes/users')

function logger(req,res,next){
    console.log(req.originalUrl)
    next()
}
app.use('/users',userRouter)
app.listen(3000)

问题定位与修复 #

问题出在代码脚本，不是网络问题，核心错误有两处：

1. bodyParser中间件调用错误 #

app.use(bodyParser.json) 缺少括号，正确写法是 app.use(bodyParser.json())。

• bodyParser.json 是一个函数，必须调用它才能返回处理JSON请求的中间件函数。直接传入函数本身的话，Express无法完成请求处理流程，导致请求挂起，页面一直加载。

2. 函数声明顺序问题（潜在风险） #

logger 函数在 app.use(logger) 之后才定义，虽然JavaScript函数声明会提升，但这种写法容易引发混淆和后续问题，建议将 logger 函数移到使用它的代码之前。

修正后的代码 #

const bodyParser = require('body-parser')
const express = require('express')
const app = express()
console.log("ff")
const mongoose = require('mongoose')  
mongoose.set('strictQuery', false)
require('dotenv/config')

// 提前定义logger函数
function logger(req, res, next){
    console.log(req.originalUrl)
    next()
}

const db = mongoose.connection
db.on('error', (error) => console.error(error))
db.once('open', () => console.log('connect to db'))

mongoose.connect(
    process.env.DB_CONNECTION,
    { useNewUrlParser: true }
)

app.use(logger)
// 修正bodyParser.json的调用，添加括号
app.use(bodyParser.json())
app.get('/', logger, (req, res) => {
    console.log("ddd")
    res.json({ username : "alex"})
})

const userRouter = require('./routes/users')
app.use('/users', userRouter)

// 添加服务器启动提示，方便确认运行状态
app.listen(3000, () => {
    console.log('服务器已启动，访问地址：http://localhost:3000')
})

验证说明 #

修正后重启服务器，访问 http://localhost:3000 就能正常返回JSON数据，页面不会再卡住。

内容的提问来源于stack exchange，提问作者user20112858