Express Middleware 是什麼？為什麼 request 會一層一層往下走？

開始學 Express 時，一定會一直看到：

app.use(...)

例如：

app.use(express.json());

很多新手第一次看到會覺得：

• user 是什麼？
• 為什麼要加這行？
• Middleware 到底在「中間」做了什麼？

今天這篇，自己做 Middleware。

其實 Express request 其實像在闖關，一層一層往下走。

Middleware 是什麼？

就是 request 到達真正 API 前，中間會先經過的函式。

• 警衛
• 檢查站
• 過濾器

request 進來
↓
檢查有沒有登入
↓
檢查資料格式
↓
記錄 log
↓
最後才進 API

這些中間過程就是 Middleware。

Express request 流程長什麼樣？

• Browser
• Middleware 1
• Middleware 2
• Middleware 3
• 真正 API
• response 回去

建立第一個 Express Middleware

建立資料夾 middleware-demo

初始化專案：

cd middleware-demo
npm init -y
npm install express

建立 server.js

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('經過 Middleware');

  next();
});

app.get('/', (req, res) => {
  res.send('首頁');
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

這段程式在做什麼？

Step 1：建立 Express app

const express = require('express');

const app = express();

這跟前面一樣。

Step 2：app.use 是什麼？

app.use((req, res, next) => {

註冊一個 Middleware。

之後每個 request 進來，都會先經過這裡。

req 是什麼？

request

也就是瀏覽器送來的資料。

res 是什麼？

response

server 回給瀏覽器的資料。

next 是什麼？

這是 Middleware 最關鍵的東西。

next()

放行，繼續往下走。

觀察 Middleware 流程

啟動 server：

node server.js

打開：

http://localhost:3000

你會看到：

• 首頁

Terminal 會印：

• 經過 Middleware

這代表 request 先經過 Middleware。

next()

放行後，才進：

app.get('/')

故意不寫 next()

現在修改：

app.use((req, res, next) => {
  console.log('經過 Middleware');
});

把：

next();

刪掉。

重新啟動 server

Ctrl + C

再：

node server.js

再打 localhost:3000

你會發現，瀏覽器一直轉圈圈。

沒有 response。

為什麼卡住？

因為 request 卡在 Middleware。

沒有：

next()

也沒有：

res.send()

所以 request 永遠不會結束。

next()

代表繼續往下

res.send()

代表直接結束 request

例如：

res.send('沒有權限');

這時候就不會再往後走。

自己做登入檢查 Middleware

const express = require('express');

const app = express();

function checkLogin(req, res, next) {
  const isLogin = false;

  if (!isLogin) {
    return res.send('請先登入');
  }

  next();
}

app.get('/profile', checkLogin, (req, res) => {
  res.send('這是會員資料');
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

checkLogin 是 Middleware

function checkLogin(req, res, next)

這就是一個 Middleware。

如果沒登入

if (!isLogin) {
  return res.send('請先登入');
}

直接結束 request。

所以不會進真正 API。

模擬登入成功

改成：

const isLogin = true;

重新整理。

這次會看到：

• 這是會員資料

這就是 Middleware 最常見的用途

• 登入驗證
• 權限檢查
• log
• 錯誤處理

express.json() 其實也是 Middleware

你之前可能寫過：

app.use(express.json());

它其實也是 Middleware。

作用是幫你把 JSON request body 解析好。

例如：

{
  "name": "chiayu"
}

Express 原本看不懂。

加了：

express.json()

之後：

req.body

才能拿到資料。

觀察 express.json()

const express = require('express');

const app = express();

app.use(express.json());

app.post('/login', (req, res) => {
  console.log(req.body);

  res.send('收到資料');
});

app.listen(3000, () => {
  console.log('Server running');
});

用 Postman 打 API

Method：POST

URL：http://localhost:3000/login

Body：

{
  "username": "chiayu",
  "password": "123456"
}

這代表 express.json() 已經幫你解析完成。

重點整理

• Middleware 是 request 中間經過的函式
• request 會一層一層往下走
• next() 代表繼續
• res.send() 代表直接結束
• 不寫 next() request 會卡住
• Middleware 很常用在登入驗證
• express.json() 本身也是 Middleware