中间件原理

你好奇为什么是1342么？

从generator说起

koa-getting-start/middleware/core/a.js

  1. function * a(){
  2.   console.log('第1个中间件before 1')
  3.   yield *b()
  4.   console.log('第1个中间件after 2')
  5. }
  7. function * b(){
  8.   console.log('  业务逻辑处理')
  9. }
  11. function *hello() {
  12.   yield *a()
  13. }
  15. var it1 = hello();
  16. console.log(it1.next());             // { value: 1, done: false }

用co简化一下代码

koa-getting-start/middleware/core/b.js

  1. var co = require('co')
  3. function * a(){
  4.   console.log('第1个中间件before 1')
  5.   yield *b()
  6.   console.log('第1个中间件after 2')
  7. }
  9. function * b(){
  10.   console.log('  业务逻辑处理')
  11. }
  13. co(function* () {
  14.   yield *a()
  15. })

看一下具体的1342

koa-getting-start/middleware/core/c.js

  1. var co = require('co')
  3. function * a(){
  4.   console.log('第1个中间件before 1')
  5.   yield *b()
  6.   console.log('第1个中间件after 2')
  7. }
  9. function * b(){
  10.   console.log('  第2个中间件before 3')
  11.   yield *c()
  12.   console.log('  第2个中间件after 4')
  13. }
  15. function * c(){
  16.   console.log('    业务逻辑处理')
  17. }
  19. co(function* () {
  20.   yield *a()
  21. })

这看起来不太像中间件啊，next呢？

中间件写法

koa-getting-start/middleware/core/d.js

  1. var co = require('co');
  2. var compose = require('koa-compose')
  4. function * a(next){
  5.   console.log('第1个中间件before 1')
  6.   yield next
  7.   console.log('第1个中间件after 2')
  8. }
  10. function * b(next){
  11.   console.log('  第2个中间件before 3')
  12.   yield next;
  13.   console.log('  第2个中间件after 4')
  14. }
  16. function * c(next){
  17.   console.log('    业务逻辑处理')
  18. }
  20. var stack = [a, b, c];
  22. co(compose(stack))

总结

通过上面的3个demo，相信大家能够理解generator的yield转让处理权的。通过generator嵌套next，实现这种回溯功能。

探索中间件原理

之前讲了中间件各种用法，原理，以至于我们还挖出了1342问题，那么你好奇Koa里到底是怎么实现中间件机制的吗？

本小节将给出精简Koa中间件机制，以便读者更容易读懂Koa源码

v1

koa-getting-start/middleware/v1/app.js

  1. var co = require('co');
  2. var debug = require('debug')('v0')
  4. module.exports = {
  5.   middleware :[],
  6.   use: function (fn) {
  7.     debug('use:' + fn);
  9.     this.middleware.push(fn);
  10.     return this;
  11.   },
  12.   callback: function (cb) {
  13.     const fn = this.compose(this.middleware);
  14.     debug('callback compose fn = ' + fn)
  16.     co(fn).then(cb, function (err) {
  17.       console.error(err.stack);
  18.     });
  19.   },
  20.   compose: function (middleware) {
  21.     debug('compose=' + middleware)
  22.     return function *(next){
  23.       if (!next) {
  24.         next = function *(){}
  25.       }
  27.       var i = middleware.length;
  29.       while (i--) {
  30.         debug('compose middleware[' + i + ']=: ' + middleware[i])
  31.         // next = co.wrap(middleware[i]).call(this);
  32.         next = middleware[i].call(this, next);
  34.         debug(next)
  35.       }
  37.       return yield *next;
  38.     }
  39.   } 
  40. }

测试代码

  1. var app = require('./app')
  3. app.use(function *(next){
  4.   console.log(1)
  5.   yield next;
  6.   console.log(2)
  7. })
  9. app.use(function *(next){
  10.   console.log(3)
  11.   yield next;
  12.   console.log(4)
  13. })
  15. app.callback();
  16. // 1
  17. // 3
  18. // 4
  19. // 2

v1的代码里只依赖co，整体来说是非常精简和好理解的，下面我们一一解读

1）中间件是由数组保存的

  1. middleware :[],

2）app.use使用中间件

  1.   use: function (fn) {
  2.     debug('use:' + fn);
  4.     this.middleware.push(fn);
  5.     return this;
  6.   },
  • 通过push方法给数组增加中间件
  • 返回this，是简单的链式写法，以便可以无限的app.use(fn).use(fn2)

3）核心入口

先看测试里代码

  1. app.callback();
  2. // 1
  3. // 3
  4. // 4
  5. // 2

知道到callback函数，打印出1342，即callback函数是入口，处理了所有中间件调用。

代码如下

  1.   callback: function (cb) {
  2.     const fn = this.compose(this.middleware);
  3.     debug('callback compose fn = ' + fn)
  5.     co(fn).then(cb, function (err) {
  6.       console.error(err.stack);
  7.     });
  8.   },

解读

  • 通过this.compose把this.middleware转变一个名为fn的generator函数
  • 通过co来执行fn
  • co的返回值是Promise对象，所以后面的then接了2个参数，cb是成功的回调，后面的匿名函数是用于处理发生异常的。

这里的逻辑比较简单，就是co去执行fn获得最终结果。但问题是this.middleware是基于generator函数的数组，怎么把它转成generator呢？这其实就是this.compose做的事儿。

4）核心变化compose

  1.   compose: function (middleware) {
  2.     return function *(next){
  3.       if (!next) {
  4.         next = function *(){}
  5.       }
  7.       var i = middleware.length;
  9.       while (i--) {
  10.         next = middleware[i].call(this, next);
  11.       }
  13.       return yield *next;
  14.     }
  15.   }

其实就是compose([f1, f2, …, fn])转化为fn(…f2(f1(noop())))，最终的返回值是一个generator function。

4.0）高阶函数

高阶函数只是将函数作为参数或返回值的函数

4.1）i—

i—之后的i = i - 1，也就是，当前的next和

  • middleware[i]是前一个中间件。

4.2）call

先来看一下call

  1. function add(a,b){  
  2.   console.log(a+b)
  3. }
  5. function sub(a,b){  
  6.   console.log(a-b)
  7. }
  9. add.call(sub, 3, 1)
  12. // 这个例子中的意思就是用 add 来替换 sub，
  13. // add.call(sub,3,1) == add(3,1) ，
  14. // 所以运行结果为：console.log(4); 
  15. // 注意：js 中的函数其实是对象，函数名是对 Function对象的引用。

那么

  1. next = middleware[i].call(this, next);

4.3) yield *

还记得

koa-getting-start/middleware/core/b.js

  1. var co = require('co')
  3. function * a(){
  4.   console.log('第1个中间件before 1')
  5.   yield *b()
  6.   console.log('第1个中间件after 2')
  7. }
  9. function * b(){
  10.   console.log('  业务逻辑处理')
  11. }
  13. co(function* () {
  14.   yield *a()
  15. })

这段代码相当于

  1. function * a(){
  2.   console.log('第1个中间件before 1')
  3.     // yield *b()
  4.     console.log('  业务逻辑处理')
  5.   console.log('第1个中间件after 2')
  6. }

亦即

  1. a(b())

通过yield*递归执行generator，是非常有用的手段。

4.4) 总结

  • 如果next为空，next = function *(){}
  • i—之后，middleware[i]就是之前的中间件，即f(n-1)
  • 通过call，实际转成之前中间件为next
  • 通过while i—规约所有中间件为一个generator
  • 通过yield *递归执行generator

compose返回的是generator，那么它就需要一个generator执行器，也就是上文出现的co，与之搭配是非常合理的。

v2

koa-getting-start/middleware/v2/app.js

  1. var co = require('co');
  2. var debug = require('debug')('v1')
  3. const convert = require('koa-convert')
  5. module.exports = {
  6.   middleware :[],
  7.   use: function (fn) {
  8.     this.middleware.push(fn);
  9.     return this;
  10.   },
  11.   callback: function () {
  12.     const fn = convert.compose(this.middleware);
  13.     debug('callback compose fn = ' + fn)
  15.     var ctx = {
  17.     }
  19.     fn(ctx).then(function(){
  21.     })
  22.   }
  23. }

测试

koa-getting-start/middleware/v2/test.js

  1. var app = require('./app')
  3. app.use((ctx, next) =>{
  4.   console.log(1)
  5.   // before
  6.   return next().then(() => {
  7.     // after
  8.     console.log(2)
  9.   })
  10. })
  12. app.use(function *(next){
  13.   console.log(3)
  14.   yield next;
  15.   console.log(4)
  16. })
  18. // console.log(app.middleware)
  19. app.callback();
  20. // 1
  21. // 3
  22. // 4
  23. // 2

v2补充

https://github.com/koajs/convert/blob/master/test.js

  1. describe('convert.compose()', () => {
  2.   it('should work', () => {
  3.     let call = []
  4.     let context = {}
  5.     let _context
  6.     let mw = convert.compose([
  7.       function * name (next) {
  8.         call.push(1)
  9.         yield next
  10.         call.push(11)
  11.       },
  12.       (ctx, next) => {
  13.         call.push(2)
  14.         return next().then(() => {
  15.           call.push(10)
  16.         })
  17.       },
  18.       function * (next) {
  19.         call.push(3)
  20.         yield* next
  21.         call.push(9)
  22.       },
  23.       co.wrap(function * (ctx, next) {
  24.         call.push(4)
  25.         yield next()
  26.         call.push(8)
  27.       }),
  28.       function * (next) {
  29.         try {
  30.           call.push(5)
  31.           yield next
  32.         } catch (e) {
  33.           call.push(7)
  34.         }
  35.       },
  36.       (ctx, next) => {
  37.         _context = ctx
  38.         call.push(6)
  39.         throw new Error()
  40.       }
  41.     ])
  43.     return mw(context).then(() => {
  44.       assert.equal(context, _context)
  45.       assert.deepEqual(call, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
  46.     })
  47.   })

v3

koa-getting-start/middleware/v3/app.js

  1. const co = require('co');
  2. const debug = require('debug')('v1')
  3. const compose = require('koa-compose')
  5. module.exports = {
  6.   middleware :[],
  7.   use: function (fn) {
  8.     this.middleware.push(fn);
  9.     return this;
  10.   },
  11.   callback: function () {
  12.     const fn = compose(this.middleware);
  13.     debug('callback compose fn = ' + fn)
  15.     var ctx = {
  17.     }
  19.     fn(ctx).then(function(){
  21.     })
  22.   }
  23. }

koa-getting-start/middleware/v3/test.js

  1. 'use strict'
  3. const co = require('co');
  4. const debug = require('debug')('v1')
  6. module.exports = {
  7.   middleware :[],
  8.   use: function (fn) {
  9.     this.middleware.push(fn);
  10.     return this;
  11.   },
  12.   compose: function (middleware) {
  13.     return function (context, next) {
  14.       // last called middleware #
  15.       let index = -1
  16.       return dispatch(0)
  17.       function dispatch (i) {
  18.         if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  19.         index = i
  20.         const fn = middleware[i] || next
  21.         if (!fn) return Promise.resolve()
  22.         try {
  23.           return Promise.resolve(fn(context, function next () {
  24.             return dispatch(i + 1)
  25.           }))
  26.         } catch (err) {
  27.           return Promise.reject(err)
  28.         }
  29.       }
  30.     }
  31.   },
  32.   callback: function () {
  33.     const fn = this.compose(this.middleware);
  34.     debug('callback compose fn = ' + fn)
  36.     var ctx = {
  38.     }
  40.     fn(ctx).then(function(){
  42.     })
  43.   }
  44. }

如果此时把其中的一个中间件变成koa 1.x支持的v3/test2.js

  1. var app = require('./app')
  2. var co = require('co')
  4. app.use((ctx, next) => {
  5.   console.log(1)
  6.   // before
  7.   return next().then(() => {
  8.     // after
  9.     console.log(2)
  10.   })
  11. })
  13. app.use(function *(next) {
  14.   console.log(3)
  15.   yield next;
  16.   console.log(4)
  17. })
  20. // app.use(function *(next) {
  21. //   console.log(3)
  22. //   yield next;
  23. //   console.log(4)
  24. // })
  26. // console.log(app.middleware)
  27. app.callback();
  28. //1
  29. //2

回形针的实现 koa compose

  1.  compose: function (middleware) {
  2.   return function (context, next) {
  3.     // last called middleware #
  4.     let index = -1
  5.     return dispatch(0)
  6.     function dispatch (i) {
  7.       if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  8.       index = i
  9.       const fn = middleware[i] || next
  10.       if (!fn) return Promise.resolve()
  11.       try {
  12.         return Promise.resolve(fn(context, function next () {
  13.           return dispatch(i + 1)
  14.         }))
  15.       } catch (err) {
  16.         return Promise.reject(err)
  17.       }
  18.     }
  19.   }
  20. }

其实就是compose([f1, f2, …, fn])转化为f1(…f(n-1)(fn(noop())))，最终的返回值是一个function (context, next) {}。

1）最终的返回值是function (context, next) {}，递归函数。

2）递归，从dispatch(0)开始，

i = 0

  1. fn == middleware[i]

然后

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

此处是执行第一个中间件，如果成功的化，就继续执行第二个中间件。其他依次类推，直至执行完所有的中间件。

结合这个中间件

  1. app.use((ctx, next) => {
  2.   console.log(1)
  3.   // before
  4.   return next().then(() => {
  5.     // after
  6.     console.log(2)
  7.   })
  8. })

实际上，

  1. var value = fn(context, function next () {
  2.   return dispatch(i + 1)
  3. })
  5. return Promise.resolve(value)

我们知道Promise.resolve()返回的是Promise对象，它可以thenable的。

举个多个中间件的例子

  1. app.use((ctx, next) => {
  2.   console.log(1)
  3.   // before
  4.   return next().then(() => {
  5.     // after
  6.     console.log(2)
  7.   })
  8. })
  10. app.use((ctx, next) => {
  11.   console.log(3)
  12.   // before
  13.   return next().then(() => {
  14.     // after
  15.     console.log(4)
  16.   })
  17. })

实际上

  1. var value = fn(context, function next () {
  2.   var dispatch_1_value = fn(context, function next () {
  3.     return dispatch(2)
  4.   })
  5.   return Promise.resolve(dispatch_1_value)
  6. })
  8. return Promise.resolve(value)

如果dispatch_1_value有then，那么肯定有些执行，即打印出4，然后执行

  1. return Promise.resolve(value)

此时，还有个then，即打印出2.

大致可以这样理解

  1. function(ctx, next){
  2.   console.log(1)
  3.   reutrn Promise.resolve(
  4.     console.log('3')
  5.     return Promise.resolve(
  7.     )
  8.     .then(function(){
  9.       console.log('4')
  10.     })
  11.   )
  12.   .then(function(){
  13.     console.log(2)
  14.   })
  15. }

至此，1342有完美的解决了。

v3 app2

此时需要修改app为app2

  1. 'use strict'
  3. const co = require('co');
  4. const debug = require('debug')('v1')
  5. const convert = require('koa-convert')
  6. const isGeneratorFunction = require('is-generator-function');
  8. module.exports = {
  9.   middleware :[],
  10.   use: function (fn) {
  11.     if (isGeneratorFunction(fn)) {
  12.       console.log('Support for generators will been removed in v3. ' +
  13.                 'See the documentation for examples of how to convert old middleware ' +
  14.                 'https://github.com/koajs/koa/tree/v2.x#old-signature-middleware-v1x');
  15.       fn = convert(fn);
  16.     }
  17.     this.middleware.push(fn);
  18.     return this;
  19.   },
  20.   compose: function (middleware) {
  21.     return function (context, next) {
  22.       // last called middleware #
  23.       let index = -1
  24.       return dispatch(0)
  25.       function dispatch (i) {
  26.         if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  27.         index = i
  28.         const fn = middleware[i] || next
  29.         if (!fn) return Promise.resolve()
  30.         try {
  31.           return Promise.resolve(fn(context, function next () {
  32.             return dispatch(i + 1)
  33.           }))
  34.         } catch (err) {
  35.           return Promise.reject(err)
  36.         }
  37.       }
  38.     }
  39.   },
  40.   callback: function () {
  41.     const fn = this.compose(this.middleware);
  42.     debug('callback compose fn = ' + fn)
  44.     var ctx = {
  46.     }
  48.     fn(ctx).then(function(){
  50.     })
  51.   }
  52. }

主要变化是

  1.   use: function (fn) {
  2.     if (isGeneratorFunction(fn)) {
  3.       console.log('Support for generators will been removed in v3. ' +
  4.                 'See the documentation for examples of how to convert old middleware ' +
  5.                 'https://github.com/koajs/koa/tree/v2.x#old-signature-middleware-v1x');
  6.       fn = convert(fn);
  7.     }
  8.     this.middleware.push(fn);
  9.     return this;
  10.   },

中的

  1.     if (isGeneratorFunction(fn)) {
  2.       console.log('Support for generators will been removed in v3. ' +
  3.                 'See the documentation for examples of how to convert old middleware ' +
  4.                 'https://github.com/koajs/koa/tree/v2.x#old-signature-middleware-v1x');
  5.       fn = convert(fn);
  6.     }

如果fn是GeneratorFunction（koa 1.x中间件），需要通过convert转换一下，转成类似的

  1.   const converted = function (ctx, next) {
  2.     return co.call(ctx, mw.call(ctx, createGenerator(next)))
  3.   }

这样就保证了，所有的compose里的

从koa 1.x到koa 2.x的演变

有人问，为什么你的例子都是koa 1.x的，而你推荐使用的koa 2.x？不要着急，听我慢慢道来。

koa 1.x

其实就是compose([f1, f2, …, fn])转化为fn(…f2(f1(noop())))，最终的返回值是一个generator function。

koa 2.x

其实就是compose([f1, f2, …, fn])转化为f1(…f(n-1)(fn(noop())))，最终的返回值是一个function (context, next) {}。

如果是function *(next){}也会被转换成成function (context, next) {}，这就是convert做的向后1.x兼容。

  • function (context, next) {} 是commonfunction，因为最终返回值也是它，所以称为common也不过分
  • co.wrap(function *(ctx, next){})其实是commonfunction一样的，co的wrap就是执行有参数的generator，而参数也是ctx和next，所以也是天生支持的。

那么剩下的就是async函数了。

  1. // 定义
  2. async function middleware(context, next) {
  3.   await next()
  4. }
  6. // 调用
  7. middleware(context, next);

从这段可知，async函数定义和普通函数定义执行都是一样的（除了需要es7-stage-3特性编译），所以无缝集成，唯一要说明的就是next，上文讲next实际是Promise对象，在想await关键字，是不是有点恍然大悟了？

绝配啊。

koa源码说明

核心源码

  • koa 1.x用的是compose 2.4+，注意无convert
  • koa 2.x用的是compose 3.1+，使用convert把generatorfunction转成commonfunction，以便后续的compose。

为啥2.x要多出个ctx？

@jonathanong

这样变化的最主要的原因是，在你写koa apps 时使用async箭头函数的时候：

  1. app.use(async (ctx, next) => {
  2.   await next()
  3. })

这种情况下，使用this是万万不可能的。

因为 Arrow Function是 Lexical scoping（定义时绑定）, this指向定义Arrow Function时外围, 而不是运行时的对象。

引用koa 1.x和2.x的差异根源

1.x

  1. var koa = require('koa');
  2. var app = koa();

2.x

  1. const Koa = require('koa');
  2. const app = new Koa();

源码

1.x

  1. /**
  2.  * Application prototype.
  3.  */
  5. var app = Application.prototype;
  7. /**
  8.  * Expose `Application`.
  9.  */
  11. module.exports = Application;
  13. /**
  14.  * Initialize a new `Application`.
  15.  *
  16.  * @api public
  17.  */
  19. function Application() {
  20.   if (!(this instanceof Application)) return new Application;
  21.   this.env = process.env.NODE_ENV || 'development';
  22.   this.subdomainOffset = 2;
  23.   this.middleware = [];
  24.   this.proxy = false;
  25.   this.context = Object.create(context);
  26.   this.request = Object.create(request);
  27.   this.response = Object.create(response);
  28. }

2.x

  2. /**
  3.  * Expose `Application` class.
  4.  * Inherits from `Emitter.prototype`.
  5.  */
  7. module.exports = class Application extends Emitter {
  9.   /**
  10.    * Initialize a new `Application`.
  11.    *
  12.    * @api public
  13.    */
  15.   constructor() {
  16.     super();
  18.     this.proxy = false;
  19.     this.middleware = [];
  20.     this.subdomainOffset = 2;
  21.     this.env = process.env.NODE_ENV || 'development';
  22.     this.context = Object.create(context);
  23.     this.request = Object.create(request);
  24.     this.response = Object.create(response);
  25.   }
  26. }

很明显，1.x是函数，而2.x是类，需要new来实例化。

整个Koa2.x里只有application做了类化，其他的还是保持之前的风格，大概还没有到必须修改的时候吧。

常用中间件

根据中间件在整个http处理流程的位置，将中间件大致分为3类：

  1. Pre-Request 通常用来改写request的原始数据
  2. Request/Response 大部分中间件都在这里，功能各异
  3. Post-Response 全局异常处理，改写response数据等

练习koa用法，集成以下中间件

  1.     "koa": "^2.0.0",
  2.     "koa-compress": "^2.0.0",
  3.     "koa-conditional-get": "^2.0.0",
  4.     "koa-etag": "^3.0.0",
  5.     "koa-favicon": "^2.0.0",
  6.     "koa-static": "^3.0.0",

app.js

  1. var serve = require('koa-static');
  2. var Koa = require('koa');
  3. var app = new Koa();
  5. var favicon = require('koa-favicon');
  6. var compress = require('koa-compress')
  7. var conditional = require('koa-conditional-get');
  8. var etag = require('koa-etag');
  10. app.use(compress({
  11.   filter: function (content_type) {
  12.     return /text/i.test(content_type)
  13.   },
  14.   threshold: 2048,
  15.   flush: require('zlib').Z_SYNC_FLUSH
  16. }))
  19. app.use(favicon(__dirname + '/public/favicon.ico'));
  21. // etag works together with conditional-get
  22. app.use(conditional());
  23. app.use(etag());
  26. // or use absolute paths
  27. app.use(serve(__dirname + '/dist'));
  29. app.listen(9090);
  31. console.log('listening on port 9090');