下篇：express、koa1、koa2的中间件原理
本作品采用知识共享署名 4.0 国际许可协议进行许可。转载联系作者并保留声明头部与原文链接https://luzeshu.com/blog/express-koa
本博客同步在http://www.cnblogs.com/papertree/p/7156402.html
上篇博客《Es5、Es6、Es7中的异步写法》总结了es不同标准下的异步写法。
这篇博客总结分别依赖于es5、es6、es7的express、koa@1、koa@2的中间件机制。
2.1 express@4.15.3
2.1.1 例子
1 'use strict';
2
3 var express = require('express');
4 var app = express();
5
6 app.use((req, res, next) => {
7 console.log('middleware 1 before');
8 next();
9 console.log('middleware 1 after');
10 });
11
12 app.use((req, res, next) => {
13 console.log('middleware 2 before');
14 next();
15 console.log('middleware 2 after');
16 });
17
18 app.use((req, res, next) => {
19 console.log('middleware 3 before');
20 next();
21 console.log('middleware 3 after');
22 });
23
24 app.listen(8888);
启动后执行“wget localhost:8888”以触发请求。
输出：
[Sherlock@Holmes Moriarty]$ node app.js
middleware 1 before
middleware 2 before
middleware 3 before
middleware 3 after
middleware 2 after
middleware 1 after
通过调用next()，去进入后续的中间件。
如果少了第14行代码，那么middleware 3不会进入。
2.1.2 源码
1. node原生创建一个http server
1 'use strict';
2
3 var http = require('http');
4
5 var app = http.createServer(function(req, res) {
6 res.writeHead(200, {'Content-Type': 'text/plain'});
7 res.end('Hello world');
8 });
9
10 app.listen(8889)
2. 通过express()创建的app
express/lib/express.js
16 var mixin = require('merge-descriptors');
17 var proto = require('./application');
23 /**
24 * Expose `createApplication()`.
25 */
26
27 exports = module.exports = createApplication;
28
29 /**
30 * Create an express application.
31 *
32 * @return {Function}
33 * @api public
34 */
35
36 function createApplication() {
37 var app = function(req, res, next) {
38 app.handle(req, res, next);
39 };
42 mixin(app, proto, false);
55 return app;
56 }
express/lib/application.js
38 var app = exports = module.exports = {};
616 app.listen = function listen() {
617 var server = http.createServer(this);
618 return server.listen.apply(server, arguments);
619 };
可以看到 app=require('express')()返回的是createApplication()里的app，即一个function(req, res, next) {} 函数。
当调用app.listen()时，把该app作为原生的http.createServer()的回调函数。因此，接收请求时实际上是进入了37~39行代码的回调函数。
进而进入到app.handle(req, res, next)。
3. 中间件的添加与触发
在中间件的处理过程中，实际上经过几个对象阶段。
app(express/lib/application.js) -> Router(express/lib/router/index.js) -> Layer(express/lib/router/layer.js)
一个app中通过this._router维护一个Router对象。
一个Router通过this.stack 维护很多个Layer对象，每个Layer对象封装一个中间件。
在2.1.1的例子中，添加一个中间件，通过app.use(fn) -> app._router.use(path, fn) -> app.stack.push(new Layer(paht, {}, fn))
当一个请求到来时触发中间件执行，通过
app.handle(req, res, undefined) //原生的http.createServer()的回调函数参数只接收req、res两个参数，next参数为undefined)
-> app._router.handle(req, res, done)
-> layer.handle_requeset(req, res, next)
express/lib/application.js
137 app.lazyrouter = function lazyrouter() {
138 if (!this._router) {
139 this._router = new Router({
140 caseSensitive: this.enabled('case sensitive routing'),
141 strict: this.enabled('strict routing')
142 });
143
144 this._router.use(query(this.get('query parser fn')));
145 this._router.use(middleware.init(this));
146 }
147 };
158 app.handle = function handle(req, res, callback) {
159 var router = this._router;
160
161 // final handler
162 var done = callback || finalhandler(req, res, {
163 env: this.get('env'),
164 onerror: logerror.bind(this)
165 });
166
167 // no routes
168 if (!router) {
169 debug('no routes defined on app');
170 done();
171 return;
172 }
173
174 router.handle(req, res, done);
175 };
187 app.use = function use(fn) {
...
213 // setup router
214 this.lazyrouter();
215 var router = this._router;
216
217 fns.forEach(function (fn) {
218 // non-express app
219 if (!fn || !fn.handle || !fn.set) {
220 return router.use(path, fn);
221 }
...
241 return this;
242 };
express/lib/router/index.js
136 proto.handle = function handle(req, res, out) {
137 var self = this;
...
151 // middleware and routes
152 var stack = self.stack;
...
174 next();
175
176 function next(err) {
...
317 layer.handle_request(req, res, next);
...
319 }
320 };
428 proto.use = function use(fn) {
...
464 var layer = new Layer(path, {
465 sensitive: this.caseSensitive,
466 strict: false,
467 end: false
468 }, fn);
469
470 layer.route = undefined;
471
472 this.stack.push(layer);
473 }
474
475 return this;
476 };
express/lib/router/layer.js
86 Layer.prototype.handle_request = function handle(req, res, next) {
87 var fn = this.handle;
88
89 if (fn.length > 3) {
90 // not a standard request handler
91 return next();
92 }
93
94 try {
95 fn(req, res, next);
96 } catch (err) {
97 next(err);
98 }
99 };
在app._router.handle()里面，最关键的形式是：
174 next();
175
176 function next(err) {
317 layer.handle_request(req, res, next);
319 }
这段代码把next函数传回给中间件的第三个参数，得以由中间件代码来控制往下走的流程。而当中间件代码调用next()时，再次进入到这里的next函数，从router.stack取出下游中间件继续执行。
2.2 koa@1.4.0
2.2.1 例子
1 'use strict';
2
3 var koa = require('koa');
4 var app = koa();
5
6 app.use(function*(next) {
7 console.log('middleware 1 before');
8 yield next;
9 console.log('middleware 1 after');
10 });
11
12 app.use(function*(next) {
13 console.log('middleware 2 before');
14 yield next;
15 console.log('middleware 2 after');
16 });
17
18 app.use(function*(next) {
19 console.log('middleware 3 before');
20 yield next;
21 console.log('middleware 3 after');
22 });
23
24 app.listen(8888);
写法跟express很像，输出也一样。
[Sherlock@Holmes Moriarty]$ node app.js
middleware 1 before
middleware 2 before
middleware 3 before
middleware 3 after
middleware 2 after
middleware 1 after
2.2.2 源码
koa源码很精简，只有四个文件。
1. 创建一个app
koa/lib/application.js
26 /**
27 * Application prototype.
28 */
29
30 var app = Application.prototype;
31
32 /**
33 * Expose `Application`.
34 */
35
36 module.exports = Application;
37
38 /**
39 * Initialize a new `Application`.
40 *
41 * @api public
42 */
43
44 function Application() {
45 if (!(this instanceof Application)) return new Application;
46 this.env = process.env.NODE_ENV || 'development';
47 this.subdomainOffset = 2;
48 this.middleware = [];
49 this.proxy = false;
50 this.context = Object.create(context);
51 this.request = Object.create(request);
52 this.response = Object.create(response);
53 }
...
61 /**
62 * Shorthand for:
63 *
64 * http.createServer(app.callback()).listen(...)
65 *
66 * @param {Mixed} ...
67 * @return {Server}
68 * @api public
69 */
70
71 app.listen = function(){
72 debug('listen');
73 var server = http.createServer(this.callback());
74 return server.listen.apply(server, arguments);
75 };
...
121 app.callback = function(){
122 if (this.experimental) {
123 console.error('Experimental ES7 Async Function support is deprecated. Please look into Koa v2 as the middleware signature has changed.')
124 }
125 var fn = this.experimental
126 ? compose_es7(this.middleware)
127 : co.wrap(compose(this.middleware));
128 var self = this;
129
130 if (!this.listeners('error').length) this.on('error', this.onerror);
131
132 return function handleRequest(req, res){
133 res.statusCode = 404;
134 var ctx = self.createContext(req, res);
135 onFinished(res, ctx.onerror);
136 fn.call(ctx).then(function handleResponse() {
137 respond.call(ctx);
138 }).catch(ctx.onerror);
139 }
140 };
通过var app = koa()返回的app就是一个new Application实例。
同express一样，也是在app.listen()里面调用原生的http.createServer()，并且传进统一处理请求的function(req, res){}
2. 中间件的添加与触发
koa的一样通过app.use()添加一个中间件，但是源码比express简单得多，仅仅只是this.middleware.push(fn)。
koa/lib/application.js
102 app.use = function(fn){
103 if (!this.experimental) {
104 // es7 async functions are not allowed,
105 // so we have to make sure that `fn` is a generator function
106 assert(fn && 'GeneratorFunction' == fn.constructor.name, 'app.use() requires a generator function');
107 }
108 debug('use %s', fn._name || fn.name || '-');
109 this.middleware.push(fn);
110 return this;
111 };
当一个请求到来时，触发上面app.callback()源码里面的handleRequest(req, res)函数。调用fn.call(ctx)执行中间件链条。
那么这里的关键就在于fn。
13 var compose = require('koa-compose');
...
121 app.callback = function(){
122 if (this.experimental) {
123 console.error('Experimental ES7 Async Function support is deprecated. Please look into Koa v2 as the middleware signature has changed.')
124 }
125 var fn = this.experimental
126 ? compose_es7(this.middleware)
127 : co.wrap(compose(this.middleware));
128 var self = this;
129
130 if (!this.listeners('error').length) this.on('error', this.onerror);
131
132 return function handleRequest(req, res){
133 res.statusCode = 404;
134 var ctx = self.createContext(req, res);
135 onFinished(res, ctx.onerror);
136 fn.call(ctx).then(function handleResponse() {
137 respond.call(ctx);
138 }).catch(ctx.onerror);
139 }
140 }
这里的this.experimental不会为true的了。否则会console.error()。
着重看co.wrap(compose(this.middleware))
这里的co.wrap()实际上就是上篇博客《Es5、Es6、Es7中的异步写法》 讲的co库的内容。
co/index.js
26 co.wrap = function (fn) {
27 createPromise.__generatorFunction__ = fn;
28 return createPromise;
29 function createPromise() {
30 return co.call(this, fn.apply(this, arguments));
31 }
32 };
这里的fn参数来自compose(this.middleware)返回的Generator函数，Generator函数通过co.call()调用后执行至结束并返回promise对象。
但是co.wrap()本身还不会调用co.call()进而触发执行中间件链条。co.wrap()只是返回了一个createPromise()函数，在该函数里面才会执行中间件链条。
因此，co.wrap()返回的fn，在请求到来触发handleRequest(req, res)之后，通过fn.call(ctx)时才会执行中间件。ctx是针对每次请求包装的上下文。
这个ctx即createPromise()的this，再通过co.call(this, ...)，传给了compose(this.middleware)返回的Generator函数的this。
这个this在compose源码里面（在下面）再通过middleware[i].call(this, next)，传给了用户的中间件代码的this。
再回来看compose(this.middleware)如何把中间件数组处理成一个Generator函数返回给co调用。
compose()函数来自koa-compose包，这个包只有一个文件，且很短。
// version 2.5.1
koa-compose/index.js
1
2 /**
3 * Expose compositor.
4 */
5
6 module.exports = compose;
7
8 /**
9 * Compose `middleware` returning
10 * a fully valid middleware comprised
11 * of all those which are passed.
12 *
13 * @param {Array} middleware
14 * @return {Function}
15 * @api public
16 */
17
18 function compose(middleware){
19 return function *(next){
20 if (!next) next = noop();
21
22 var i = middleware.length;
23
24 while (i--) {
25 next = middleware[i].call(this, next);
26 }
27
28 return yield *next;
29 }
30 }
31
32 /**
33 * Noop.
34 *
35 * @api private
36 */
37
38 function *noop(){}
这里的middleware[i]循环是从最后的中间件往前的遍历。
首先co.call()触发的是compose()返回的一个匿名的Generator函数。拿到的参数next实际上传给了最后一个中间件的next。
进入匿名函数的循环里面，最后一个中间件（比如第3个）调用之后返回一个Iterator（注意Generator调用后还不会执行内部代码），这个Iterator作为第2个中间件的next参数。第二个中间件调用之后同样返回Iterator对象作为第一个中间件的next参数。
而第一个中间件返回的Iterator对象被外层的匿名Generator函数yield回去。
触发之后便是执行第一个中间件，在第一个中间件里面yield next，便是执行第二个中间件。
2.3 koa@2.3.0
2.3.1 例子
1 'use strict';
2
3 var Koa = require('koa');
4 var app = new Koa(); // 不再直接通过koa()返回一个app
5
6 app.use(async (ctx, next) => {
7 console.log('middleware 1 before');
8 await next();
9 console.log('middleware 1 after');
10 });
11
12 app.use(async (ctx, next) => {
13 console.log('middleware 2 before');
14 await next();
15 console.log('middleware 2 after');
16 });
17
18 app.use(async (ctx, next) => {
19 console.log('middleware 3 before');
20 await next();
21 console.log('middleware 3 after');
22 });
23
24 app.listen(8888);
输出同上两个都一样。
2.3.2 源码
koa@2的app.listen()和app.use()同koa1差不多。区别在于app.callback()和koa-compose包。
koa/lib/application.js
32 module.exports = class Application extends Emitter {
...
125 callback() {
126 console.log('here');
127 const fn = compose(this.middleware);
128 console.log('here2');
129
130 if (!this.listeners('error').length) this.on('error', this.onerror);
131
132 const handleRequest = (req, res) => {
133 res.statusCode = 404;
134 const ctx = this.createContext(req, res);
135 const onerror = err => ctx.onerror(err);
136 const handleResponse = () => respond(ctx);
137 onFinished(res, onerror);
138 return fn(ctx).then(handleResponse).catch(onerror);
139 };
140
141 return handleRequest;
142 }
...
189 };
koa2不依赖于Generator函数特性，也就不依赖co库来激发。
通过compose(this.middleware)把所有async函数中间件包装在一个匿名函数里头。
这个匿名函数在请求到来的时候通过fn(ctx)执行。
在该函数里面，再依次处理所有中间件。
看compose()源码：
koa-compose/index.js
// version 4.0.0
1 'use strict'
2
3 /**
4 * Expose compositor.
5 */
6
7 module.exports = compose
8
9 /**
10 * Compose `middleware` returning
11 * a fully valid middleware comprised
12 * of all those which are passed.
13 *
14 * @param {Array} middleware
15 * @return {Function}
16 * @api public
17 */
18
19 function compose (middleware) {
20 if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
21 for (const fn of middleware) {
22 if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
23 }
24
25 /**
26 * @param {Object} context
27 * @return {Promise}
28 * @api public
29 */
30
31 return function (context, next) {
32 // last called middleware #
33 let index = -1
34 return dispatch(0)
35 function dispatch (i) {
36 if (i <= index) return Promise.reject(new Error('next() called multiple times'))
37 index = i
38 let fn = middleware[i]
39 if (i === middleware.length) fn = next
40 if (!fn) return Promise.resolve()
41 try {
42 return Promise.resolve(fn(context, function next () {
43 return dispatch(i + 1)
44 }))
45 } catch (err) {
46 return Promise.reject(err)
47 }
48 }
49 }
50 }
31~49行的代码，在请求到来时执行，并执行中间件链条。
第42~44行代码就是执行第i个中间件。传给中间件的两个参数context、next函数。当中间件await next()时，调用dispatch(i+1)，等待下一个中间执行完毕。
注意到42行把中间件函数的返回值使用Promise.resolve()包装成Promise值。我们可以在中间件里面返回一个Promise，并且等待该Promise被settle，才从当前中间件返回。
比如2.3.1的例子中的第二个中间件修改成：
12 app.use(async (ctx, next) => {
13 console.log('middleware 2 before');
14 await next();
15 console.log('middleware 2 after');
16 return new Promise((resolve, reject) => {
17 setTimeout(() => {
18 console.log('timeout');
19 return resolve();
20 }, 3000);
21 });
22 });
那么输出会变成：
[Sherlock@Holmes Moriarty]$ node app.js
middleware 1 before
middleware 2 before
middleware 3 before
middleware 3 after
middleware 2 after
timeout
middleware 1 after
但注意如果漏写了第19行代码，即Promise不会被settle，那么最后的“middleware 1 after”不会被输出。
