node中koa中间件机制详解


Posted in Javascript onAugust 22, 2017

koa

koa是由express原班人马打造的一个更小、更富有表现力、更健壮的web框架。

在我眼中,koa的确是比express轻量的多,koa给我的感觉更像是一个中间件框架,koa只是一个基础的架子,需要用到的相应的功能时,用相应的中间件来实现就好,诸如路由系统等。一个更好的点在于,express是基于回调来处理,至于回调到底有多么的不好,大家可以自行搜索来看。koa1基于的co库,所以koa1利用Generator来代替回调,而koa2由于node对async/await的支持,所以koa2利用的是async/await。关于async以及co库等,大家可以参考我之前写过的一篇文章(理解async)。koa可以说是一个各种中间件的架子,下面就来看一下koa对于中间件部分的实现:

koa1的中间件

koa1主要利用的是Generator来实现,一般来说,koa1的一个中间件大概是长这个样子的:

app.use(function *(next){
  console.log(1);
  yield next;
  console.log(5);
});
app.use(function *(next){
  console.log(2);
  yield next;
  console.log(4);
});
app.use(function *(){
  console.log(3);
});

这样的输出会是1, 2, 3, 4, 5,koa的中间件的实现主要依靠的是koa-compose:

function compose(middleware){
 return function *(next){
  if (!next) next = noop();

  var i = middleware.length;
  // 组合中间件
  while (i--) {
   next = middleware[i].call(this, next);
  }

  return yield *next;
 }
}
function *noop(){}

源码非常的简单,实现的功能就是将所有的中间件串联起来,首先给倒数第一个中间件传入一个noop作为其next,再将这个整理后的倒数第一个中间作为next传入倒数第二个中间件,最终得到的next就是整理后的第一个中间件。说起来比较复杂,画图来看:

node中koa中间件机制详解

实现的效果如同上图,与redux需要实现的目标类似,只要遇到了yield next就去执行下一个中间件,利用co库很容易将这个流程串联起来,下面来简单模拟下,中间件完整的实现:

const middlewares = [];

const getTestMiddWare = (loggerA, loggerB) => {
  return function *(next) {
    console.log(loggerA);
    yield next;
    console.log(loggerB);
  }
};
const mid1 = getTestMiddWare(1, 4),
  mid2 = getTestMiddWare(2, 3);

const getData = new Promise((resolve, reject) => {
  setTimeout(() => resolve('数据已经取出'), 1000);
});

function *response(next) {
  // 模拟异步读取数据库数据
  const data = yield getData;
  console.log(data);
}

middlewares.push(mid1, mid2, response);
// 简单模拟co库
function co(gen) {
  const ctx = this,
    args = Array.prototype.slice.call(arguments, 1);
  return new Promise((reslove, reject) => {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    const baseHandle = handle => res => {
      let ret;
      try {
        ret = gen[handle](res);
      } catch(e) {
        reject(e);
      }
      next(ret);
    };
    const onFulfilled = baseHandle('next'),
      onRejected = baseHandle('throw');
      
    onFulfilled();
    function next(ret) {
      if (ret.done) return reslove(ret.value);
      // 将yield的返回值转换为Proimse
      let value = null;
      if (typeof ret.value.then !== 'function') {
        value = co(ret.value);
      } else {
        value = ret.value;
      }
      if (value) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('yield type error'));
    }
  });
}
// 调用方式
const gen = compose(middlewares);
co(gen);

koa2的中间件

随着node对于async/await的支持,貌似不需要再借助于co这种工具库了,直接利用原生的就好,于是koa也做出了改变,来看目前的koa-compose:

function compose (middleware) {
 // 参数检验
 return function (context, next) {
  // last called middleware #
  let index = -1
  return dispatch(0)
  function dispatch (i) {
   if (i <= index) return Promise.reject(new Error('next() called multiple times'))
   index = i
   let fn = middleware[i]
   // 最后一个中间件的调用
   if (i === middleware.length) fn = next
   if (!fn) return Promise.resolve()
   // 用Promise包裹中间件,方便await调用
   try {
    return Promise.resolve(fn(context, function next () {
     return dispatch(i + 1)
    }))
   } catch (err) {
    return Promise.reject(err)
   }
  }
 }
}

koa-compose利用了Promise,koa2的中间件的参数也有一个变为了两个,而且执行下一个的中间件利用的是await next(),要达到与上面的示例代码的相同效果,需要更改中间件的写法:

const middlewares = [];
const getTestMiddWare = (loggerA, loggerB) => async (ctx, next) => {
  console.log(loggerA);
  await next();
  console.log(loggerB);
};

const mid1 = getTestMiddWare(1, 4),
  mid2 = getTestMiddWare(2, 3);
const response = async () => {
  // 模拟异步读取数据库数据
  const data = await getData();
  console.log(data);
};
const getData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve('数据已经取出'), 1000);
});
middlewares.push(mid1, mid2);

// 调用方式
compose(middlewares)(null, response);

如何做到兼容

可以看到的是,koa1与koa2对于中间件的实现还是有着很多的不同的,将koa1的中间件直接拿到koa2下面来使用肯定是会出现错误的,如何兼容这两个版本也成了一个问题,koa团队写了一个包来是koa1的中间件可以用于koa2中,叫做koa-convert,先来看看这个包怎么使用:

function *mid3(next) {
  console.log(2, 'koa1的中间件');
  yield next;
  console.log(3, 'koa1的中间件');
}
convert.compose(mid3)

来看下这个包实现的思路:

// 将参数转为数组,对每一个koa1的中间件执行convert操作
convert.compose = function (arr) {
 if (!Array.isArray(arr)) {
  arr = Array.from(arguments)
 }
 return compose(arr.map(convert))
}
// 关键在于convert的实现
const convert = mw => (ctx, next) => {
  // 借助co库,返回一个Promise,同时执行yield
  return co.call(ctx, mw.call(ctx, createGenerator(next)));
};

function * createGenerator (next) {
 /*
   next为koa-compomse中:
   function next () {
     return dispatch(i + 1)
   }
 */
 return yield next()
 // 执行完koa1的中间件,又回到了利用await执行koa2中间件的正轨
}

个人感觉koa-convert的思路就是对Generator封装一层Promise,使上一个中间件可以利用await next()的方式调用,对于Generator的执行,利用co库,从而达到了兼容的目的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的关联数组问题
Mar 04 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
javascript每日必学之多态
Feb 23 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
js初始化验证实例详解
Nov 26 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
理解javascript async的用法
Aug 22 #Javascript
React Native之TextInput组件解析示例
Aug 22 #Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 #Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 #Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 #Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 #Javascript
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
You might like
php安全配置 如何配置使其更安全
2011/12/16 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
医院护士的求职信
2014/01/03 职场文书
解除劳动合同协议书
2014/04/14 职场文书
安全责任书模板
2014/07/22 职场文书
元旦标语大全
2014/10/09 职场文书
优秀班组事迹材料
2014/12/24 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python