中间件原理(洋葱模型)
本质上是:函数压栈和出栈。
function a() {
console.log(1);
b(); // 函数b进栈,函数a将执行权交给函数b
console.log(2); // 函数a执行完毕出栈
}
function b() {
console.log(3);
c(); // 函数c进栈,函数b将执行权交给函数c
console.log(4); // 函数b执行完毕出栈,将执行权返还给函数a
}
function c() {
console.log(5); // 函数c执行完毕出栈,将执行权返还给函数b
}
a(); // 函数a进栈
2
3
4
5
6
7
8
9
10
11
12
13
14
koa
是从第一个中间件开始执行,遇到next
进入下一个中间件,一直执行到最后一个中间件,再逆序向上执行上一个中间件next
之后的代码,一直到第一个中间件执行结束才发出响应。
const Koa = require('koa');
const app = new Koa();
// 中间件1
app.use(async (ctx, next) => {
console.log(1);
next(); // 中间件1暂停执行,并将执行权交给中间件2
console.log(2); // 中间件1继续执行
});
// 中间件2
app.use(async (ctx, next) => {
console.log(3);
next(); // 中间件2暂停执行,并将执行权交给中间件3
console.log(4); // 中间件2继续执行,并将执行权返还给中间件1
});
// 中间件3
app.use(async (ctx, next) => {
console.log(5);
next(); // 中间件3暂停执行
console.log(6); // 因为没有后续中间件,中间件3继续执行,并将执行权返还给中间件2
});
app.listen(8088, () => {
console.log('server start at port 8088');
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
上述代码的执行结果:是一个洋葱模型结构,从上往下一层一层进来,再从下往上一层一层回去。这其实就是Koa中间件的原理,为了解决复杂应用中频繁的回调而设计的级联代码,并不直接把控制权完全交给下一个中间件,而是碰到next就去执行下一个中间件,等下面中间件都执行完了,还会执行之前中间件中next以下的代码。
koa2的中间件实现
use:
const app = new Koa();
app.use(logger);
2
middleware:
koa实例对象app包含了一个数组属性middleware,通过use方法,将中间件push到数组中,源码如下:
use(fn) {
if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
if (isGeneratorFunction(fn)) {
deprecate('Support for generators will been removed in v3. ' +
'See the documentation for examples of how to convert old middleware ' +
'https://github.com/koajs/koa/tree/v2.x#old-signature-middleware-v1x');
fn = convert(fn);
}
debug('use %s', fn._name || fn.name || '-');
this.middleware.push(fn); return this;
}
2
3
4
5
6
7
8
9
10
11
从源码来看,koa2为了兼容koa1时中间件是generators函数所以使用了
convert
中间件将generators
包装成一个Promise
。
callback:当执行
app.listen
方法开启服务器时,实际上是在内部,使用http
模块,启动了http
服务器,并将自身的callback
函数传入,即
http.createServer(app.callback()).listen(...)
所以来看下callback的源码:
// 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 //执行后fn为undefined,所以下一步将resolve()
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, function next ( ) {
return dispatch(i + 1)
}))
} catch (err) {
return Promise.reject(err)
}
}
}
}
callback() {
const fn = compose(this.middleware);
if (!this.listeners('error').length) this.on('error', this.onerror);
return (req, res) => {
res.statusCode = 404;
const ctx = this.createContext(req, res);
onFinished(res, ctx.onerror);
fn(ctx).then(() => respond(ctx)).catch(ctx.onerror);
};
}
const fn = compose(this.middleware);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
compose的执行流程是将中间件数组传入,返回一个类型为(ctx, next) =>{}
的函数。
ctx,为网络处理上下文,next指向下个中间件。内部通过dispatch函数形成了一条处理请求的流水线。
每当有请求时将执行:
return (req, res) => {
res.statusCode = 404;
const ctx = this.createContext(req, res);//对req,res,cookies封装
onFinished(res, ctx.onerror); //当连接结束报错时执行ctx.onerror
fn(ctx).then(() => respond(ctx)).catch(ctx.onerror);
};
2
3
4
5
6
首先,对状态码设置初始值404,并且通过createConext创建初始上下文。然后将上下文传入fn。
fn执行流程为,首先会执行第一个中间件,并把第下个中间件函数作参数next传入,每当执行next()将控制权交给下一个中间件,知道中间件执行结束,交还控制权,才能继续执行下一部操作,执行到最后一个中间件,因为next()为undefined,所以终止执行,promise执行resolve。
fn函数执行结束表示着,该请求已经处理好,只剩下发送给客户端了,所以接下来,将把处理好的上下文ctx传入respond执行最后的操作。
respond包含了对许多response的状态码,和body类型的判断来决定返回给客户端什么数据。
参考文档
评 论:
← Koa 基础入门