koa2 中間件
koa2的中間件是通過 async await 實現的，中間件執行順序是“洋蔥圈”模型。
中間件之間通過next函數聯系,當一個中間件調用 next() 后，會將控制權交給下一個中間件, 直到下一個中間件不再執行 next() 后, 將會沿路折返,將控制權依次交換給前一個中間件。
如圖：
koa2 中間件實例
app.js:
const Koa = require('koa');
const app = new Koa();
// logger
app.use(async (ctx, next) => {
console.log('第一層 - 開始')
await next();
const rt = ctx.response.get('X-Response-Time');
console.log(`${ctx.method} ----------- ${ctx.url} ----------- ${rt}`);
console.log('第一層 - 結束')
});
// x-response-time
app.use(async (ctx, next) => {
console.log('第二層 - 開始')
const start = Date.now();
await next();
const ms = Date.now() - start;
ctx.set('X-Response-Time', `${ms}ms`);
console.log('第二層 - 結束')
});
// response
app.use(async ctx => {
console.log('第三層 - 開始')
ctx.body = 'Hello World';
console.log('第三層 - 結束')
});
app.listen(3000);
執行app.js后，瀏覽器訪問 http://localhost:3000/text , 控制台輸出結果：
第一層 - 開始
第二層 - 開始
第三層 - 開始
第三層 - 結束
第二層 - 結束
打印第一次執行的結果： GET -------- /text ------ 4ms
第一層 - 結束
koa2 中間件應用
下面是一個登陸驗證的中間件：
loginCheck.js:
module.exports = async (ctx, next) => {
if (ctx.session.username) {
// 登陸成功，需執行 await next()，以繼續執行下一步
await next()
return
}
// 登陸失敗，禁止繼續執行，所以不需要執行 next()
ctx.body = {
code: -1,
msg: '登陸失敗'
}
}
在刪除操作中使用 loginCheck.js :
router.post('/delete', loginCheck, async (ctx, next) => {
const author = ctx.session.username
const id = ctx.query.id
// handleDelete() 是一個處理刪除的方法，返回一個 promise
const result = await handleDelete(id, author)
if (result) {
ctx.body = {
code: 0,
msg: '刪除成功'
}
} else {
ctx.body = {
code: -1,
msg: '刪除失敗'
}
}
})
express 中間件
與 koa2 中間件不同的是，express中間件一個接一個的順序執行, 通常會將 response 響應寫在最后一個中間件中
主要特點：
- app.use 用來注冊中間件
- 遇到 http 請求，根據 path 和 method 判斷觸發哪些中間件
- 實現 next 機制，即上一個中間件會通過 next 觸發下一個中間件
express 中間件實例
const express = require('express')
const app = express()
app.use((req, res, next) => {
console.log('第一層 - 開始')
setTimeout(() => {
next()
}, 0)
console.log('第一層 - 結束')
})
app.use((req, res, next) => {
console.log('第二層 - 開始')
setTimeout(() => {
next()
}, 0)
console.log('第二層 - 結束')
})
app.use('/api', (req, res, next) => {
console.log('第三層 - 開始')
res.json({
code: 0
})
console.log('第三層 - 結束')
})
app.listen(3000, () => {
console.log('server is running on port 3000')
})
執行app.js后，瀏覽器訪問 http://localhost:3000/api , 控制台輸出結果：
第一層 - 開始
第一層 - 結束
第二層 - 開始
第二層 - 結束
第三層 - 開始
第三層 - 結束
因為上面各個中間件中的 next() 是異步執行的，所以 打印結果是線行輸出的。
如果取消上面next()的異步執行，直接按如下方式：
const express = require('express')
const app = express()
app.use((req, res, next) => {
console.log('第一層 - 開始')
next()
console.log('第一層 - 結束')
})
app.use((req, res, next) => {
console.log('第二層 - 開始')
next()
console.log('第二層 - 結束')
})
app.use('/api', (req, res, next) => {
console.log('第三層 - 開始')
res.json({
code: 0
})
console.log('第三層 - 結束')
})
app.listen(3000, () => {
console.log('server is running on port 3000')
})
執行app.js后，瀏覽器訪問 http://localhost:3000/api , 控制台輸出結果：
第一層 - 開始
第二層 - 開始
第三層 - 開始
第三層 - 結束
第二層 - 結束
第一層 - 結束
可見，express 的中間件也可以形成“洋蔥圈”模型，但是一般在express中不會這么做，因為 express 的 response 一般在最后一個中間件，所以其它中間件 next() 后的代碼影響不到最終結果。
express 中間件應用
下面是一個登陸驗證的中間件：
loginCheck.js:
module.exports = (req, res, next) => {
if (req.session.username) {
// 登陸成功，需執行 next()，以繼續執行下一步
next()
return
}
// 登陸失敗，禁止繼續執行，所以不需要執行 next()
ctx.body = {
code: -1,
msg: '登陸失敗'
}
}
在刪除操作中使用 loginCheck.js :
router.post('/delete', loginCheck, (req, res, next) => {
const author = req.session.username
const id = req.query.id
// handleDelete() 是一個處理刪除的方法，返回一個 promise
const result = handleDelete(id, author)
return result.then(val => {
if (val) {
ctx.body = {
code: 0,
msg: '刪除成功'
}
} else {
ctx.body = {
code: -1,
msg: '刪除失敗'
}
}
})
})