众所周知,koa2核心的部分就是middleware和context了,本文将从结合官网demo以及源码对其进行解读
官网例子使用
const Koa = require('koa');
const app = new Koa();
// x-response-time
app.use(async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
ctx.set('X-Response-Time', `${ms}ms`);
});
// logger
app.use(async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
console.log(`${ctx.method} ${ctx.url} - ${ms}`);
});
// response
app.use(async ctx => {
ctx.body = 'Hello World';
});
app.listen(3000);
复制代码
上述代码做的事
- 1.require('koa')执行koa源码中lib/application.js的导出部分(这是因为可以看到koa源码中的package.json文件的main为application.js,默认为Index.js),new Koa对其导出进行实例化,便于我们调用application.js上的相关方法
- 2.既然已经拿到方法了,app.use就是调用application的use方法,这里就是初始化中间件,这里每一个use就是一个中间件,接下来解读源码会提到
- 3.app.listen(3000),这里除了大家可以想到的nodejs的http server模块监听3000端口,并且传入req,res对象还有更重要的事,接收到请求使用中间件,同样解读源码会详细解释
源码解读-中间件原理
根据上述代码做的事,我们从2开始:
首先http.createrServer,ceateServer方法接受一个函数作为参数,这个函数的两个参数分别为request和response; 而在koa中接受一个callback,就是下面代码中的this.callback
listen(...args) {
debug('listen');
const server = http.createServer(this.callback());
return server.listen(...args);
}
复制代码
上述callback已经执行,所以真正的createrServer接受的函数应该是callback的返回值,所以这和ceateServer方法接受一个函数作为参数不矛盾,本质上都是一样的,接下来看具体的callback函数
callback() {
const fn = compose(this.middleware);
if (!this.listeners('error').length) this.on('error', this.onerror);
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res);
return this.handleRequest(ctx, fn);
};
return handleRequest;
}
复制代码
返回值是const定义的handleRequest函数,这个函数首先创建一个context(在context挂载http请求响应状态等一些信息),然后将创建好的ctx和一个fn作为参数传给了this.handleReguest;ctx很好理解,就是将一些http模块的req,res挂载到ctx上去,也就是我们koa的重要组成部分之一,请求上下文
createContext(req, res) {
const context = Object.create(this.context);
const request = context.request = Object.create(this.request);
const response = context.response = Object.create(this.response);
context.app = request.app = response.app = this;
context.req = request.req = response.req = req;
context.res = request.res = response.res = res;
request.ctx = response.ctx = context;
request.response = response;
response.request = request;
context.originalUrl = request.originalUrl = req.url;
context.cookies = new Cookies(req, res, {
keys: this.keys,
secure: request.secure
});
request.ip = request.ips[0] || req.socket.remoteAddress || '';
context.accept = request.accept = accepts(req);
context.state = {};
return context;
}
复制代码
关键是compose(this.middleware),他的参数this.middleware是个数组,会在使用koa的use方法时,push进去函数,也就是我们开头所提到的初始化中间件
use(fn) {
if (typeof fn !== 'function') throw new TypeError('middleware must be a function!'); //类型判断
if (isGeneratorFunction(fn)) {
deprecate('Support for generators will be removed in v3. ' +
'See the documentation for examples of how to convert old middleware ' +
'https://github.com/koajs/koa/blob/master/docs/migration.md');
fn = convert(fn); //注释提到了,generators将被弃用,这里做了转换,可以看koa-convert源码,使用co模块进行转换,转换成promise对象,并且自动调用Generator next对象,co模块实现之类的可以自行去看源码,这里不多赘述
}
debug('use %s', fn._name || fn.name || '-');
this.middleware.push(fn); //这里是关键,在middleware数组里面添加了各个中间件方法,也就是app.use传入的函数
return this;
}
复制代码
再来看compose源码
function compose (middleware) {
//一些类型判断,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!')
}
/**
* @param {Object} context
* @return {Promise}
* @api public
*/
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 //避免同一个中间件多次调用next
let fn = middleware[i] //获得中间件函数
if (i === middleware.length) fn = next //递归出口,调用结束
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, function next () {
return dispatch(i + 1)
}))
} catch (err) {
return Promise.reject(err)
}
}
}
}
复制代码
可以通过源码看出,传递给this.handleRequest(ctx, fn)的fn就是这个compose的返回值,一个匿名函数: 接下里我们先不看这个匿名函数,继续看到this.handleRequest,既然已经明确了它的两个参数ctx和fn:
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); //匿名函数中的next应该始终是undefined,用来控制结束
}
复制代码
之前说到fn就是compose返回的匿名函数,现在又将fn传递给了handleRequest,
控制权转到fnMiddleware中,所以fnMiddlewar就是刚才我们没有看的匿名函数,这里通过尾递归调用依次控制执行中间件函数,
最终返回一个promise.resolve,这个resolve中的fn其实就是app.use中的函数,此时我们才执行了app.use中的函数,并且把ctx,next通过参数的形式穿给了这个函数;
所以中间件的声明是在app.use,执行是在我们app.listen接受到请求的时候,这样我们就可以在接受到请求的时候一次执行我们的中间件
综上就是所有内容了,如有问题或异议,恳请指出,不甚感激~