写在前面
从今天开始阅读学习一下Koa
源码,Koa
对前端来说肯定不陌生,使用node
做后台大部分会选择Koa
来做,Koa
源码的代码量其实很少,接下来让我们一层层剥离,分析其中的源码
Koa用法
|
|
浏览器打开 http://localhost:3000 可以看到返回了一个对象 {a:1}
洋葱模型
Koa最经典的就是基于洋葱模型的HTTP中间件处理流程,可以看下图
看下面代码是否能理解
|
|
访问 http://localhost:3000 输出
不知道看到这你是否能够明白,不明白也没关系,我们可以深入源码来分析具体的实现
koa源码
https://github.com/koajs/koa/blob/master/lib/application.js#L77
执行app.listen(3000)
;会走以下代码
|
|
https://github.com/koajs/koa/blob/master/lib/application.js#L141
我们接着看callback
方法
在上面callback
执行了compose
方法来处理中间件,compose
方法就是今天我们需要重点讲的方法,等会再说,我们知道Koa
大部分情况都是在处理中间件,那么它们是怎么拿到中间件的呢?
上面可以看到有一个this.middleware
,中间件肯定是放在这里面的,于是我们搜索,在最上层可以在构造函数里看到初始化的时候,它把this.middleware = []
;置为一个数组,我们使用中间件的时候是通过app.use
来使用的。继续寻找use
方法
https://github.com/koajs/koa/blob/master/lib/application.js#L120use
方法
每次我们调用app.use
,koa
都是把这个方法push
到middleware
数组里面。感觉说得有点啰嗦了,流程大体就是这样。
|
|
koa-compose
https://github.com/koajs/compose/blob/master/index.js
compose
是引用的koa-compose
包,查看源码发现关键只有20几行
|
|
我们默许中间件传入的是数组函数,进一步剥离,精简的代码如下
|
|
初略的看,compose
返回的是一个函数,首先执行了dispatch(0)
,函数内容返回的都是Promise对象。
最初执行dispatch(0)
;通过递归的方式不断的运行中间件,每个中间件都接收了两个参数,分别是context
和next
,context
其实就是koa
的ctx
,如果我们不传递next
方法,后面的中间件就不会继续执行下去。
之前的代码我们可以初略的想象一下以下代码
输出:
其实就是一层层嵌套执行中间件的方法,执行完next
再往上执行
|
|
最后
koa-compose
大致就这些,流程大致如洋葱一样,代码也不多,很好理解,以后使用中间件的时候就清晰很多了。
原文地址: http://www.wclimb.site/2019/12/11/Koa源码系列之koa-compose/