快捷導(dǎo)航

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

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

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

中間件與 koa2中間件

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

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

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

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

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

koa2的中間件可以有好幾層，在每一次請(qǐng)求與響應(yīng)的時(shí)候，都可以在中間攔截，

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

Koa 中間件作用

中間件功能是可以訪問(wèn)請(qǐng)求對(duì)象（request），響應(yīng)對(duì)象（response）和應(yīng)用程序的請(qǐng)求-響應(yīng)周期中通過(guò) next 對(duì)下一個(gè)中間件函數(shù)的調(diào)用。

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

實(shí)例

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

自己編寫(xiě)一個(gè)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('這是首頁(yè)');
        ctx.body = '這是首頁(yè)'
    } else if (ctx.url === '/user') {
        if (ctx.method === 'GET') {
            console.log('這是用戶列表頁(yè)');
            ctx.body = '這是用戶列表頁(yè)'
        } else if (ctx.method === 'POST') {
            console.log('添加用戶');
            ctx.body = '添加用戶'
        }
    } else {
        ctx.status = 404
    }
})
app.listen(3000)

使用koa-router實(shí)現(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 = '這是用戶首頁(yè)'
})
router.get('/del', async (ctx) => {
    ctx.body = '刪除用戶'
})
router.post('/add', async (ctx) => {
    ctx.body = '添加用戶'
})
app.use(router.routes())
app.listen(3000)