你需要掌握的 Koa 洋葱模型和中间件
大家好,我是前端西瓜哥。
Koa 是一个 nodejs 框架,经常用于写 web 后端服务。它是 Express 框架的原班人马开发的新一代 web 框架,使用了 async / await 来优雅处理无处不在的异步逻辑。
我们常说 Koa 其实是洋葱模型,今天就来深挖下 Koa 的洋葱模型到底是什么。
什么是洋葱模型
在这之前,我们先简单看看 Koa 是如何使用的。
在 Koa 中,我们通过 app.use 方法注册中间件。中间件可以注册多个,它们的执行顺序和注册时机相关,先注册的先执行。
所谓中间件就是一个函数,这个函数接受 Koa 提供的两个参数:
ctx 上下文对象;
next 函数。
ctx 上有各种参数,比如请求对象 request 和响应对象 response。
调用 next 函数会执行下一个的中间件,如果你不调用 next 函数,那下一个中间件就不会执行。
我们看一个例子:
const Koa = require('koa');const app = new Koa();// 中间件 1:记录请求花费时间
app.use(async (ctx, next) => {console.log('中间件 1');const start = new Date().getTime();await next();const t = new Date().getTime() - start;console.log('请求花费时间为', t + ' ms');
})// 中间件 2:获取数据
app.use(async (ctx, next) => {console.log('中间件 2')const data = await getData(); ctx.body = { data };
})// 模拟从数据库获取数据,耗时 1 s
const getData = async () => {await new Promise((resolve) => {setTimeout(() => {resolve();}, 1000);})return 'Hello World!';
}app.listen(3005);
当请求时,服务器的日志是这样的:
中间件
中间件 2
请求花费时间为 1005 ms
从中间件 1 睡觉来看来说,代码逻辑可以分为三部分:
先执行
next()
前面的代码;然后执行
next()
其后的中间件 2 的所有代码;最后执行
next()
后面的代码;
这种先执行了当前中间件的前半部分逻辑,然后处理完之后的中间件后,最后继续执行当前中间件的后半部分的特性,可以让我们可以像洋葱一样,从外到内先处理 request 对象,再从内到外处理 response 对象,于是被称为 洋葱模型。
洋葱模式本质是设计模式中的 职责链模式 的变体。
职责链模式,指的是将请求和响应解耦,让多个处理对象有机会依此去处理请求。比如处理对象 A 先处理数据,然后将处理后的数据传给处理对象 B,依此类推形成了一条链。链条上的不同处理对象负责各自的职责。
A -> B -> C
相比经典的职责链模式,洋葱模型可以将一个处理器分成两个部分,在不同时机触发但却拥有相同的上下文,在一些情况下是非常好用的,就比如刚刚提到的打印单个请求花费时长。
A1 -> B1 -> C -> B2 -> A2
Koa 中的源码实现
Koa 是一个非常轻量的库,源码分析起来相对比较容易,所以我们来看看它的洋葱模型,也就是中间件模型的实现吧。不过因为用到了大量闭包的实现,看起来还是容易眼花的。
首先通过 new Koa() 创建的一个 app 对象,它有一个成员属性 middleware,初始值为空数组。这个 middleware 就是保存中间件函数的地方。
每当我们调用 app.use(fn) 时,Koa 会将中间件函数加到 middleware。
use (fn) {this.middleware.push(fn)return this
}
最后我们调用 app.listen(port)
,这个 API 会启动 http 服务器。
listen (...args) {const server = http.createServer(this.callback())return server.listen(...args)
}
this.callback 是一个函数,会返回一个封装好的函数给 nodejs 原生的 http.createServer 使用。
callback 实现为:
callback () {const fn = this.compose(this.middleware)if (!this.listenerCount('error')) this.on('error', this.onerror)const handleRequest = (req, res) => {const ctx = this.createContext(req, res)return this.handleRequest(ctx, fn)}return handleRequest
}
再看看这个 this.compose
方法,它将多个中间件函数进行组合,让它们可以依此被调用。这个 compose 被抽成一个名为 koa-compose 的 npm 包,里面的代码很少,我将其中的核心代码抽出来:
function compose (middleware) {return function (context, next) {function dispatch (i) {let fn = middleware[i]if (i === middleware.length) fn = next// 走到最后一个中间件if (!fn) return Promise.resolve()return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))}return dispatch(0)}
}
compose 函数的作用是将中间件函数进行组装,先返回第一个中间件函数的封装,其类型签名为 () => Promise<any>
。
当这个被封装的函数被执行时,它会将执行原始的中间件函数,并拿到下一个中间件函数的封装,也就是 next。
我们回到 callback 方法中,其中 this.handleRequest 的实现为:
handleRequest (ctx, fnMiddleware) {const res = ctx.resres.statusCode = 404const onerror = err => ctx.onerror(err)const handleResponse = () => respond(ctx)onFinished(res, onerror)return fnMiddleware(ctx).then(handleResponse).catch(onerror)
}
this.handleRequest 将 compose 返回的第一个中间件,进行调用。
Express 是洋葱模型吗?
Express 发布时,ES6 还没出来,不能使用 Promise,更不用说 ES7 的 async / await 了。
所以 Express 在当时情况下,其实并没有能力实现这种支持异步的洋葱模型,那时候要做异步就只能使用回调的风格。
总的来说,Express 也算是一种 只支持同步的洋葱模型,因为它在实现上没有处理 next 是 async 的情况,这是历史原因导致的。
Express 是在调用 res.send 时,结束数据的处理,返回响应数据给客户的。在一个请求里不能多次调用 res.rend。
Koa 是给 ctx.response 上加内容,等到中间件走完才返回数据。
结尾
洋葱模型,就是将数据顺序传入到多个中间件中,让它们进行处理传递,并利用函数递归的特性,让我们可以在一个中间件内先执行前半部分逻辑,再执行之后的所有中间件的完整逻辑后,再掉转方向继续执行这个中间件的后半部分。
相比一旦进入下个中间件后再不回来,这种实现可以让我们的代码更灵活,在一些场景下很有用。
我是前端西瓜哥,欢迎关注我,学习更多前端知识。
你需要掌握的 Koa 洋葱模型和中间件相关推荐
- 50行代码串行Promise,koa洋葱模型原来这么有趣?
1. 前言 大家好,我是若川,最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,感兴趣的可以加我微信 ruochuan12 参与,长期交流学习. 之前写的<学习源码整体 ...
- 模拟koa洋葱模型实现
koa洋葱模型即是注册的中间件采取先进后出的运行策略. 问题 app.use(async next => {console.log(1);await next();console.log(2); ...
- 学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理
前言 这是学习源码整体架构系列第七篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是主线的具体函数的实现.本篇文章学习的是实际仓库的代码. 学习源码整体 ...
- 【koa系列】koa洋葱模型及其compose原理解析
什么是洋葱模型 先来看一个 demo const Koa = require('koa'); const app = new Koa();// 中间件1 app.use((ctx, next) =&g ...
- 洋葱模型php,理解Koa洋葱模型
中间件特性 | | | middleware 1 | | | | +-----------------------------------------------------------+ | | | ...
- koa - 洋葱模型浅析
1.什么是koa? Koa是一个精简的node框架,被认为是第二代Node框架,其最大的特点就是独特的中间件流程控制,是一个典型的洋葱模型,它的核心工作包括下面两个方面: 将node原生的req和re ...
- 什么是koa洋葱模型?
什么是koa? Koa是一个精简的node框架,被认为是第二代Node框架,其最大的特点就是独特的中间件流程控制,是一个典型的洋葱模型,它的核心工作包括下面两个方面: 将node原生的req和res封 ...
- 洋葱模型php,koa 洋葱模型
分析 1.首先这是koa2最简单的入门例子,我将通过这个入门例子来演示koa2的洋葱模型 const Koa = require('koa'); const app = new Koa(); app. ...
- koa 洋葱模型的简单实现
需求: 让一个函数, 执行到一半的时候, 去执行其他函数,大致如下 输出顺序依次为: 1 > 3 > 5 > 6 > 4 > 2 上面 koa 的执行,有点类似如下效果: ...
最新文章
- 苹果公司提出Mobile-ViT | 更小更轻精度更高,MobileNets或成为历史
- python seaborn_Python数据可视化,seaborn如何做出非常规图表
- 用反射简化 asp.net 报表的一点总结
- 何兆武:西南联大的数学家
- VSCode自定义代码片段6——CSS选择器
- [webpack] 如何把代码内联进html中?
- k8s之创建etcd集群
- ViT (Vision Transformer) ---- SimpleRNN + Attention
- 3 微信开发本地代理环境的搭建--实现将内网ip映射到外网
- Sentaurus TCAD SDevice 实例教程
- 引用 中国计算机学术权威期刊
- Windows下修改本机域名localhost
- 20P83 pr预设模板5000种视频转场过渡视觉特效豪华预设包 v2
- Angular报注入错误,以及解决方式,$injector:unpr
- 人脸识别机与服务器访问协议,人脸识别终端485通信协议.doc
- 图片去水印工具-图片一键去水印的免费app
- 抖音之xl xa xg xk 四神签名参数
- Origin 'http://localhost:8080' is therefore not allowed access
- R语言-将数据按照月份、季度、年份划分及求某个代码(地名、产业名等)对应的累积值
- 诺基亚手机锁码忘记了,手机锁了,格式化忘记锁码了怎么办?