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 相关文章推荐
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
新浪新闻小偷
2006/10/09 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
thinkphp分页实现效果
2016/10/13 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python tkinter事件高级用法实例
2018/01/31 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python3 map函数和filter函数详解
2019/08/26 Python
Python-opencv 双线性插值实例
2020/01/17 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
职业生涯规划书基本格式
2014/01/06 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
绩效工资实施方案
2014/03/15 职场文书
房贷工资证明范本
2015/06/12 职场文书
单位收入证明范本
2015/06/18 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python