koa中间件核心(koa-compose)源码解读分析


Posted in Javascript onJune 15, 2020

最近经常使用koa进行服务端开发,迷恋上了koa的洋葱模型,觉得这玩意太好用了。而且koa是以精简为主,没有很多集成东西,所有的东西都需按需加载,这个更是太合我胃口了哈哈哈哈。

相对与express的中间件,express的中间件使用的是串联,就像冰糖葫芦一样一个接着一个,而koa使用的V型结构(洋葱模型),这将给我们的中间件提供更加灵活的处理方式。

基于对洋葱模型的热衷,所以对koa的洋葱模型进行一探究竟,不管是koa1还是koa2的中间件都是基于koa-compose进行编写的,这种V型结构的实现就来源于koa-compose。
附上源码先:

function compose (middleware) {
 // 参数middleware 是一个中间件数组,存放我们用app.use()一个个串联起来的中间件
 // 判断中间件列表是否为数组,如果不为数组,则抛出类型错误
 if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
 // 判断中间件是否为函数,如果不为函数,则抛出类型错误
 for (const fn of middleware) {
  if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
 }

 /**
 1. @param {Object} context
 2. @return {Promise}
 3. @api public
  */
 
 return function (context, next) {
  // 这里next指的是洋葱模型的中心函数
  // context是一个配置对象,保存着一些配置,当然也可以利用context将一些参数往下一个中间传递
   
  // last called middleware #
  let index = -1 // index是记录执行的中间件的索引
  return dispatch(0) // 执行第一个中间件 然后通过第一个中间件递归调用下一个中间件
  
  function dispatch (i) {
   // 这里是保证同个中间件中一个next()不被调用多次调用 
   // 当next()函数被调用两次的时候,i会小于index,然后抛出错误
   if (i <= index) return Promise.reject(new Error('next() called multiple times'))
   index = i
   let fn = middleware[i] // 取出要执行的中间件
   if (i === middleware.length) fn = next // 如果i 等于 中间件的长度,即到了洋葱模型的中心(最后一个中间件)
   if (!fn) return Promise.resolve() // 如果中间件为空,即直接resolve
   try {
    // 递归执行下一个中间件 (下面会重点分析这个)
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
   } catch (err) {
    return Promise.reject(err)
   }
  }
 }
}

看到这里,如果下面的那些能够理解,那么下面的可以不用看的,还是不能理解的就继续往下看,详细一点的分析。

首先,我们用app.use()添加一个中间件,在koa的源码里app.use()这个方法就是将一个中间件push进middleware这个中间件列表里。源码里是这么写的(这个比较简单 不做分析):

use(fn) {
  if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
  if (isGeneratorFunction(fn)) {
   deprecate('Support for generators will be removed in v3. ' +
        'See the documentation for examples of how to convert old middleware ' +
        'https://github.com/koajs/koa/blob/master/docs/migration.md');
   fn = convert(fn);
  }
  debug('use %s', fn._name || fn.name || '-');
  this.middleware.push(fn);
  return this;
 }

compose这个方法传入一个中间件列表middleware,这个列表就是我们使用use()添加进去的方法列表,首先会判断列表是否为数组,中间件是否为方法,如果不是就直接抛出类型错误。

  1. compose返回的是一个函数,这里使用闭包来缓存中间件列表,然后这个函数接收两个参数,第一个参数是context,是一个存放配置信息的对象。第二份参数是一个next方法,也是洋葱模型的中心或者说是V型模型的拐点。
  2. 创建一个index变量来保存执行的中间件索引,然后从第一个中间件开始开始递归执行。
let index = -1
return dispatch(0)

dispatch方法就是执行中间件,先判断索引,如果i小于index那么说明在同一个中间件里执行了两次或两次以上的next函数,如果i>index则说明该中间件还未执行,那么将该中间件的所以记录下来

if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i

取出该中间件,如果i等于中间件的长图,则说明执行到了洋葱模型的中心,则最后一个中间件,如果中间件为空,那么就直接resovle掉

let fn = middleware[i]
    if(i === middleware.length){
     fn = next
    }
    if(!fn){
      return Promise.resolve()
    }

到了最刺激的部分了,也是有点绕的部分了,首先为啥return的是一个Promise的对象(Promise.resolve也是一个promise对象)呢,因为我们await next()的时候,await是等待且执行一个async函数的完成,async会默认返回一个promise对象,所以这里return的是一个promise对象。我们在每个中间里面await mext() next()指的就是下一个中间件,也就是

fn(context, function next () {
      return dispatch(i + 1)
     })

所以我们上一个中的await 等待的就是dispatch(i+1)的执行完成,dispatch返回的是Promise.resolve(fn(context, function next () { xxxx })),这样来看虽然一开始只执行了dispatch(0),但是是由这个函数形成了一条执行链。

以三个中间件执行为例,dispatch(0)执行后就形成:

Promise.resolve( // 第一个中间件
 function(context,next){ // 这里的next第二个中间件也就是dispatch(1)
   // await next上的代码 (中间件1)
  await Promise.resolve( // 第二个中间件
   function(context,next){ // 这里的next第二个中间件也就是dispatch(2)
     // await next上的代码 (中间件2)
    await Promise.resolve( // 第三个中间件
     function(context,next){ // 这里的next第二个中间件也就是dispatch(3)
       // await next上的代码 (中间件3)
      await Promise.resolve()
      // await next下的代码 (中间件3)
     }
    )
     // await next下的代码 (中间件2)
   }
  )
   // await next下的代码 (中间件2)
 }
)

先执行await上面的代码,然后等待最后一个中间件resolve一个个往上传递,这就形成了一个洋葱模型。
最后附上测试代码:

async function test1(ctx, next) {
  console.log('中间件1上');
  await next();
  console.log('中间件1下');
 };
 
 async function test2(ctx, next) {
  console.log('中间件2上');
  await next();
  console.log('中间件2下');
 };
 
 async function test3(ctx, next) {
  console.log('中间件3上');
  await next();
  console.log('中间件3下');
 };
 let middleware = [test1, test2, test3];
 
 let cp = compose(middleware);
 
 cp('ctx', function() {
  console.log('中心');
 });

OK,到这里koa2的中间件核心(koa-compose)就解析完成了,一开始看的时候,也被绕了好久,多看几遍多分析一步一步捋顺。koa1的中间件等过几天有时间再补上吧,koa1是基于generator,源码比起koa2相对简单。

最近在看koa2源码,等有时间再继续更新koa一些源码的分析。

到此这篇关于koa中间件核心(koa-compose)源码解读分析的文章就介绍到这了,更多相关koa中间件核心内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
vue组件实例解析
Jan 10 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
详解封装基础的angular4的request请求方法
Jun 05 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 #Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 #Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 #Javascript
浅谈Vue 自动化部署打包上线
Jun 14 #Javascript
JS定时器如何实现提交成功提示功能
Jun 12 #Javascript
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
ng-alain的sf如何自定义部件的流程
Jun 12 #Javascript
You might like
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
js获取视频时长代码
2014/04/10 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
高效使用Python字典的清单
2018/04/04 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python实现电子产品商店
2019/02/26 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
初中优秀教师事迹材料
2014/08/18 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python