koa源码中promise的解读


Posted in Javascript onNovember 13, 2018

koa 是一个非常轻量优雅的 node 应用开发框架,趁着双十一值班的空当阅读了下其源代码,其中一些比较有意思的地方整理成文与大家分享一下。

洋葱型中间件机制的实现原理

我们经常把 koa 中间件的执行机制类比于剥洋葱,这样设计其执行顺序的好处是我们不再需要手动去管理 request 和 response 的业务执行流程,且一个中间件对于 request 和 response 的不同逻辑能够放在同一个函数中,可以帮助我们极大的简化代码。在了解其实现原理之前,先来介绍一下 koa 的整体代码结构:

lib
|-- application.js
|-- context.js
|-- request.js
|-- response.js

application 是整个应用的入口,提供 koa constructor 以及实例方法属性的定义。context 封装了koa ctx 对象的原型对象,同时提供了对 response 和 request 对象下许多属性方法的代理访问,request.js 和 response.js 分别定义了ctx request 和 response 属性的原型对象。

接下来让我们来看 application.js中的一段代码:

listen(...args) {
 debug('listen');
 const server = http.createServer(this.callback());
 return server.listen(...args);
}
callback() {
 const fn = 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;
}
handleRequest(ctx, fnMiddleware) {
 const res = ctx.res;
 res.statusCode = 404;
 const onerror = err => ctx.onerror(err);
 const handleResponse = () => respond(ctx);
 onFinished(res, onerror);
 return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}

上述代码展示了 koa 的基本原理,在其实例方法 listen 中对 http.createServer 进行了封装 ,然后在回调函数中执行 koa 的中间件,在 callback 中,this.middleware 为业务定义的中间件函数所构成的数组,compose 为 koa-compose 模块提供的方法,它对中间件进行了整合,是构建 koa 洋葱型中间件模型的奥妙所在。从 handleRequest 方法中可以看出 compose 方法执行返回的是一个函数,且该函数的执行结果是一个 promise。接下来我们就来一探究竟,看看 koa-compose 是如何做到这些的,其 源代码和一段 koa 中间件应用示例代码如下所示:

// compose源码
function compose (middleware) {
 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!')
 }
 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()
  try {
  return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
  } catch (err) {
  return Promise.reject(err)
  }
 }
 }
}

/*
** 中间件应用示例代码
*/
let Koa = require('koa')
let app = new Koa()
app.use(async function ware0 (ctx, next) {
 await setTimeout(function () {
 console.log('ware0 request')
 }, 0)
 next()
 console.log('ware0 response')
})
app.use(function ware1 (ctx, next) {
 console.log('ware1 request')
 next()
 console.log('ware1 response')
})
// 执行结果
ware0 request
ware1 request

ware1 response
ware0 response

从上述 compose 的源码可以看出,每个中间件所接受的 next 函数入参都是在 compose 返回函数中定义的 dispatch 函数,dispatch接受下一个中间件在 middlewares 数组中的索引作为入参,该索引就像一个游标一样,每当 next 函数执行后,游标向后移一位,以获取 middlaware 数组中的下一个中间件函数 进行执行,直到数组中最后一个中间件也就是使用 app.use 方法添加的最后一个中间件执行完毕之后再依次 回溯执行。整个流程实际上就是函数的调用栈,next 函数的执行就是下一个中间件的执行,只是 koa 在函数基础上加了一层 promise 封装以便在中间件执行过程中能够将捕获到的异常进行统一处理。 以上述编写的应用示例代码作为例子画出函数执行调用栈示意图如下:

koa源码中promise的解读

整个 compose 方法的实现非常简洁,核心代码仅仅 17 行而已,还是非常值得围观学习的。

generator函数类型中间件的执行

v1 版本的 koa 其中间件主流支持的是 generator 函数,在 v2 之后改而支持 async/await 模式,如果依旧使用 generator,koa 会给出一个 deprecated 提示,但是为了向后兼容,目前 generator 函数类型的中间件依然能够执行,koa 内部利用 koa-convert 模块对 generator 函数进行了一层包装,请看代码:

function convert (mw) {
 // mw为generator中间件
 if (typeof mw !== 'function') {
 throw new TypeError('middleware must be a function')
 }
 if (mw.constructor.name !== 'GeneratorFunction') {
 // assume it's Promise-based middleware
 return mw
 }
 const converted = function (ctx, next) {
 return co.call(ctx, mw.call(ctx, createGenerator(next)))
 }
 converted._name = mw._name || mw.name
 return converted
}

function * createGenerator (next) {
 return yield next()
}

从上面代码可以看出,koa-convert 在 generator 外部包裹了一个函数来提供与其他中间件一致的接口,内部利用 co 模块来执行 generator 函数,这里我想聊的就是 co 模块的原理,generator 函数执行时并不会立即执行其内部逻辑,而是返回一个遍历器对象,然后通过调用该遍历器对象的 next 方法来执行,generator 函数本质来说是一个状态机,如果内部有多个 yield 表达式,就需要 next 方法执行多次才能完成函数体的执行,而 co 模块的能力就是实现 generator 函数的 自动执行,不需要手动多次调用 next 方法,那么它是如何做到的呢?co 源码如下:

function co(gen) {
 var ctx = this;
 var args = slice.call(arguments, 1);

 // we wrap everything in a promise to avoid promise chaining,
 // which leads to memory leak errors.
 // see https://github.com/tj/co/issues/180
 return new Promise(function(resolve, reject) {
 if (typeof gen === "function") gen = gen.apply(ctx, args);
 if (!gen || typeof gen.next !== "function") return resolve(gen);

 onFulfilled();

 /**
  * @param {Mixed} res
  * @return {Promise}
  * @api private
  */

 function onFulfilled(res) {
  var ret;
  try {
  ret = gen.next(res);
  } catch (e) {
  return reject(e);
  }
  next(ret);
 }

 /**
  * @param {Error} err
  * @return {Promise}
  * @api private
  */

 function onRejected(err) {
  var ret;
  try {
  ret = gen.throw(err);
  } catch (e) {
  return reject(e);
  }
  next(ret);
 }

 /**
  * Get the next value in the generator,
  * return a promise.
  *
  * @param {Object} ret
  * @return {Promise}
  * @api private
  */

 function next(ret) {
  if (ret.done) return resolve(ret.value);
  // toPromise是一个函数,返回一个promise示例
  var value = toPromise.call(ctx, ret.value);
  if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
  return onRejected(
  new TypeError(
   "You may only yield a function, promise, generator, array, or object, " +
   'but the following object was passed: "' +
   String(ret.value) +
   '"'
  )
  );
 }
 });
}

从 co 源码来看,它先是手动执行了一次onFulfilled 函数来触发 generator 遍历器对象的 next 方法,然后利用promise的onFulfilled 函数去自动完成剩余状态机的执行,在onRejected 中利用遍历器对象的 throw 方法抛出执行上一次 yield 过程中遇到的异常,整个实现过程可以说是相当简洁优雅。

结语

通过上面的例子可以看出 promise 的能量是非常强大的,koa 的中间件实现和 co 模块的实现都是基于 promise,除了应用于日常的异步流程控制,在开发过程中我们还可以大大挖掘其潜力,帮助我们完成一些自动化程序工作流的事情。

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

Javascript 相关文章推荐
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 #Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 #Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 #Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 #Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 #Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 #Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 #Javascript
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
python 监控logcat关键字功能
2020/09/04 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
小加工厂管理制度
2014/01/21 职场文书
给校长的建议书400字
2014/05/15 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
我的中国梦主题班会
2015/08/14 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL