阅读 2365

前端开发之中间件模式

前言

中间件模式是现如今各个框架——尤其是 Web 框架使用得较多的一种开发模式。譬如大名鼎鼎的 Express, Koa 等均使用中间件来处理请求。那么,何为中间件模式呢?

什么是中间件

处理 Web 请求时,我们常常需要进行验证请求来源、检查登录状态、确定是否有足够权限、打印日志等操作,而这些重复的操作如果写在具体的路由处理函数中,明显会导致代码冗余,这个时候,我们就可以将这些通用的流程抽象为中间件函数,减少重复代码。

我们可以将 Web 请求想象为一条串联的管道,在管道中有多个关卡,请求数据由源头起,依次流过各关卡,每个关卡独立运作,既可以直接响应数据,又可以对请求稍作调整,并使之流向下一关卡,这个关卡,就是中间件。

Koa 的中间件

我们以 Koa 的中间件为例。

router
    .get('/users', loginChecker, async ctx => {
    	const users = await db.getUsers()
        ctx.body = users
	})
    .delete('/users/:id', adminChecker, async ctx => {
    	const { id } = ctx.params
        await db.deleteUserById(id)
    	ctx.body = { error: false }
	})
复制代码

我们使用 loginChecker 来检查用户是否登录,而对于高风险的删除操作,我们使用 adminChecker 来判断用户是否有管理员权限。

诚如你如看到的,我们在编写具体的路由处理函数时,只需考虑事务逻辑,大大降低了心智负担。我们甚至可以在最外层套一个错误处理中间件,catch 住所有异常,统一处理——这也是我为什么不在使用 await 时包装一层 try/catch

我们不讨论怎么开发 Koa 中间件,我们来谈一下如何实现中间件模式。

洋葱模型

Koa 实现了基于洋葱模型的中间件,在处理请求时,总是从外层中间件开始,到最内层,最后回到最外层。基于这个结论,我们可以使用一个数组来顺序存储中间件,并依次调用。

async function exec(middlewares, ctx) {
    let index = 0
    
    const next = async () => {
        const current = middlewares[index++]
        if (current) {
            await current(ctx, next)
        }
    }
    
    await next()
}

const ware1 = async (ctx, next) => {
    ctx.body = 'This is ware 1'
    await next()
    console.log("ware1 is back")
}

// 不调用 next,则不会进入下个中间件
const ware2 = async (next) => {
    ctx.body = 'Hello, world'
}
复制代码

ctx 意为上下文(Context),是中间件通信的桥梁,各中间件通过修改 ctx 来返回数据。如 Koa 就是通过修改 ctx.body 来改变响应体的。

通过向当前中间件传递调用 next 方法,来控制中间件执行的过程,实现了洋葱模型。值得注意的是,ware2 中未调用 next 方法,因此不管它后面是否还有其它中间件,它都会成为洋葱模型中的最里层,随后会回到外层的中间件去。

后记

本文介绍了什么是中间件,并附上简单的实现。如果你是微信小程序开发者,可以参考我使用中间件模式开发的小程序请求库 minapp-request,了解更完整的代码实现。

喜欢请点个赞,能关注一下就更好啦。

关注下面的标签,发现更多相似文章
评论