Express.js中间件工作机制及示例代码服务端执行流程解析

1. app.use() 定义的中间件执行优先级 #

• 是的，app.use() 注册的全局中间件会优先于路由处理器执行，执行顺序严格按照代码中挂载的顺序。
• 只要请求路径匹配中间件的挂载路径（未指定路径则匹配所有请求），中间件就会在路由处理之前被调用。比如先挂载的bodyParser会在自定义中间件之前运行。

2. 首次请求时 req.body['password'] 的值 #

• 首次请求（比如浏览器直接GET请求加载页面）时，req.body['password'] 确实是 undefined。
• 原因是：GET请求没有请求体（request body），bodyParser 中间件只能解析存在请求体的请求（如POST、PUT），此时req.body为空对象，自然取不到password属性。

3. 为何提交表单后才能获取到password值 #

• 当用户在客户端输入内容并提交表单时，浏览器会发送POST请求，并将表单中的数据（包括password）打包放到请求体中。
• bodyParser 中间件会解析这个请求体，把表单数据解析成键值对存入req.body，此时就能通过req.body['password']获取到用户输入的值了。

Express服务端执行流程解析（基于典型项目结构） #

假设项目核心代码如下：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 挂载bodyParser中间件，解析表单数据
app.use(bodyParser.urlencoded({ extended: false }));

// 自定义中间件
app.use((req, res, next) => {
  console.log('当前password值:', req.body['password']);
  next(); // 传递请求到下一个环节
});

// GET路由：返回登录页面
app.get('/login', (req, res) => {
  res.send(`
    <form method="POST" action="/login">
      <input type="password" name="password">
      <button type="submit">提交</button>
    </form>
  `);
});

// POST路由：处理表单提交
app.post('/login', (req, res) => {
  res.send(`你输入的密码是：${req.body['password']}`);
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在http://localhost:3000');
});

对应的执行流程：

1. 初始化阶段：加载express和bodyParser模块，创建Express应用实例app。
2. 中间件挂载：
   • 先挂载bodyParser.urlencoded中间件，拦截所有带请求体的请求，解析表单数据到req.body。
   • 再挂载自定义中间件，所有请求都会先执行该中间件，打印password值后通过next()传递请求。
3. 请求处理阶段：
   • 用户访问GET /login：
     1. 请求经过bodyParser（GET无请求体，req.body为空）。
     2. 进入自定义中间件，打印undefined。
     3. 到达GET /login路由，返回带表单的页面。
   • 用户提交表单（发送POST /login）：
     1. 请求经过bodyParser，解析表单中的password值到req.body。
     2. 进入自定义中间件，打印用户输入的密码。
     3. 到达POST /login路由，读取req.body['password']并返回给客户端。
4. 服务器启动：调用app.listen()监听3000端口，等待客户端请求。

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