Koa2 和 Express 中間件對(duì)比

學(xué)習(xí)express和koa最主要是理解使用中間件，中間件是框架的核心實(shí)現(xiàn)仰禽，一起來(lái)看下這2個(gè)框架的中間件有什么區(qū)別。

koa2 中間件

koa2的中間件是通過(guò) async await 實(shí)現(xiàn)的，中間件執(zhí)行順序是“洋蔥圈”模型赔桌。

中間件之間通過(guò)next函數(shù)聯(lián)系,當(dāng)一個(gè)中間件調(diào)用 next() 后，會(huì)將控制權(quán)交給下一個(gè)中間件, 直到下一個(gè)中間件不再執(zhí)行 next() 后, 將會(huì)沿路折返,將控制權(quán)依次交換給前一個(gè)中間件渴逻。

如圖：

中間件.png

koa2 中間件實(shí)例

app.js:

const Koa = require('koa');
const app = new Koa();

// logger
app.use(async (ctx, next) => {
    console.log('第一層 - 開(kāi)始')
    await next();
    const rt = ctx.response.get('X-Response-Time');
    console.log(`${ctx.method} ----------- ${ctx.url} ----------- ${rt}`);
    console.log('第一層 - 結(jié)束')
});

// x-response-time
app.use(async (ctx, next) => {
    console.log('第二層 - 開(kāi)始')
    const start = Date.now();
    await next();
    const ms = Date.now() - start;
    ctx.set('X-Response-Time', `${ms}ms`);
    console.log('第二層 - 結(jié)束')
});

// response
app.use(async ctx => {
    console.log('第三層 - 開(kāi)始')
    ctx.body = 'Hello World';
    console.log('第三層 - 結(jié)束')
});

app.listen(3000);

執(zhí)行app.js后疾党，瀏覽器訪問(wèn) http://localhost:3000/text , 控制臺(tái)輸出結(jié)果：

第一層 - 開(kāi)始
第二層 - 開(kāi)始
第三層 - 開(kāi)始
第三層 - 結(jié)束
第二層 - 結(jié)束
打印第一次執(zhí)行的結(jié)果： GET -------- /text ------ 4ms
第一層 - 結(jié)束

koa2 中間件應(yīng)用

下面是一個(gè)登陸驗(yàn)證的中間件：

loginCheck.js:

module.exports = async (ctx, next) => {
    if (ctx.session.username) {
        // 登陸成功，需執(zhí)行 await next()惨奕，以繼續(xù)執(zhí)行下一步
        await next()
        return
    }
    // 登陸失敗雪位，禁止繼續(xù)執(zhí)行，所以不需要執(zhí)行 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() 是一個(gè)處理刪除的方法梨撞，返回一個(gè) promise
    const result = await handleDelete(id, author)

    if (result) {
        ctx.body = {
            code: 0,
            msg: '刪除成功'
        }
    } else {
        ctx.body = {
            code: -1,
            msg: '刪除失敗'
        }
    }
})

express 中間件

與 koa2 中間件不同的是雹洗，express中間件一個(gè)接一個(gè)的順序執(zhí)行, 通常會(huì)將 response 響應(yīng)寫(xiě)在最后一個(gè)中間件中

主要特點(diǎn)：

app.use 用來(lái)注冊(cè)中間件
遇到 http 請(qǐng)求，根據(jù) path 和 method 判斷觸發(fā)哪些中間件
實(shí)現(xiàn) next 機(jī)制卧波，即上一個(gè)中間件會(huì)通過(guò) next 觸發(fā)下一個(gè)中間件

express 中間件實(shí)例

const express = require('express')

const app = express()

app.use((req, res, next) => {
    console.log('第一層 - 開(kāi)始')
    setTimeout(() => {
        next()
    }, 0)
    console.log('第一層 - 結(jié)束')
})

app.use((req, res, next) => {
    console.log('第二層 - 開(kāi)始')
    setTimeout(() => {
        next()
    }, 0)
    console.log('第二層 - 結(jié)束')
})

app.use('/api', (req, res, next) => {
    console.log('第三層 - 開(kāi)始')
    res.json({
        code: 0
    })
    console.log('第三層 - 結(jié)束')
})

app.listen(3000, () => {
    console.log('server is running on port 3000')
})

執(zhí)行app.js后时肿，瀏覽器訪問(wèn) http://localhost:3000/api , 控制臺(tái)輸出結(jié)果：

第一層 - 開(kāi)始
第一層 - 結(jié)束
第二層 - 開(kāi)始
第二層 - 結(jié)束
第三層 - 開(kāi)始
第三層 - 結(jié)束

因?yàn)樯厦娓鱾€(gè)中間件中的 next() 是異步執(zhí)行的，所以打印結(jié)果是線行輸出的港粱。

如果取消上面next()的異步執(zhí)行螃成，直接按如下方式：

const express = require('express')

const app = express()

app.use((req, res, next) => {
    console.log('第一層 - 開(kāi)始')
    next()
    console.log('第一層 - 結(jié)束')
})

app.use((req, res, next) => {
    console.log('第二層 - 開(kāi)始')
    next()
    console.log('第二層 - 結(jié)束')
})

app.use('/api', (req, res, next) => {
    console.log('第三層 - 開(kāi)始')
    res.json({
        code: 0
    })
    console.log('第三層 - 結(jié)束')
})

app.listen(3000, () => {
    console.log('server is running on port 3000')
})

執(zhí)行app.js后，瀏覽器訪問(wèn) http://localhost:3000/api , 控制臺(tái)輸出結(jié)果：

第一層 - 開(kāi)始
第二層 - 開(kāi)始
第三層 - 開(kāi)始
第三層 - 結(jié)束
第二層 - 結(jié)束
第一層 - 結(jié)束

可見(jiàn)查坪，express 的中間件也可以形成“洋蔥圈”模型寸宏，但是一般在express中不會(huì)這么做，因?yàn)?express 的 response 一般在最后一個(gè)中間件咪惠，所以其它中間件 next() 后的代碼影響不到最終結(jié)果击吱。

express 中間件應(yīng)用