Koa2中間件的作用及路由實現(xiàn)實例詳解

更新時間：2023年05月24日 10:42:17 作者：前端老兵

這篇文章主要介紹了Koa2中間件的作用及路由實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

中間件與 koa2中間件

通俗的講：中間件就是匹配路由之前或者匹配路由完成做的一系列的操作，我們就可以把它叫做中間件。

中間件的作用就是，在上下兩個事件通訊的過程中強行塞入一個事件，這個事件可以起到承上啟下的作用，并在運行應用的時候做一些只關(guān)于部分模塊化功能。

中間件其實并不是koa2的發(fā)明，在express中就已經(jīng)存在了，只不過koa2站在了es7巨人的肩膀上，使用async await讓中間件形成了一個飽滿的洋蔥型。

Koa 中間件采用的是洋蔥圈模型，每次執(zhí)行下一個中間件傳入兩個參數(shù) ctx 和 next，參數(shù) ctx 是由 koa 傳入的封裝了 request 和 response 的變量，可以通過它訪問 request 和 response，next 就是進入下一個要執(zhí)行的中間件。

// 中間件，暴露一個函數(shù)
module.exports = function () {
  return async function (ctx, next) {
    pv(ctx);
    // 執(zhí)行下一個中間件，沒有下一個中間件就執(zhí)行完了
    await next();
  };
};

koa2的中間件可以有好幾層，在每一次請求與響應的時候，都可以在中間攔截，

做登錄態(tài)管理、狀態(tài)碼管理、錯誤處理...總之每個中間件都可以做一次攔截來搞事情。

Koa 中間件作用

中間件功能是可以訪問請求對象（request），響應對象（response）和應用程序的請求-響應周期中通過 next 對下一個中間件函數(shù)的調(diào)用。

通俗來講，利用這個特性在 next 之前對 request 進行處理，在 next 函數(shù)之后對 response 處理。Koa 的中間件模型可以非常方便的實現(xiàn)后置處理邏輯。

實例

const koa = require('koa')
const app = new koa()
app.use(async (ctx,next) => {
    console.log('1')
    await next()
    console.log('1-1')
    ctx.body = 'hello world'
})
app.use(async (ctx,next) => {
    console.log('2')
    await next()
    console.log('2-1')
})
app.use((ctx) => {
    console.log('3')
})
app.listen(3000)

輸出

1
2
3
2-1
1-1

自己編寫一個Koa路由中間件

官網(wǎng)地址：https://koa.bootcss.com/index.html#request

const koa = require('koa')
const app = new koa()
app.use(async (ctx) => {
    if (ctx.url === '/') {
        console.log('這是首頁');
        ctx.body = '這是首頁'
    } else if (ctx.url === '/user') {
        if (ctx.method === 'GET') {
            console.log('這是用戶列表頁');
            ctx.body = '這是用戶列表頁'
        } else if (ctx.method === 'POST') {
            console.log('添加用戶');
            ctx.body = '添加用戶'
        }
    } else {
        ctx.status = 404
    }
})
app.listen(3000)

使用koa-router實現(xiàn)路由

const koa = require('koa')
const Router = require('koa-router')
const app = new koa()
const router = Router({
    prefix: '/user'
})
router.get('/', async (ctx) => {
    ctx.body = '這是用戶首頁'
})
router.get('/del', async (ctx) => {
    ctx.body = '刪除用戶'
})
router.post('/add', async (ctx) => {
    ctx.body = '添加用戶'
})
app.use(router.routes())
app.listen(3000)