最近项目要使用koa,所以提前学习一下,顺便看了koa框架的源码.
注:源码是koa2.x
koa的源码很简洁,关键代码只有4个文件,当然还包括一些依赖npm包
const Koa = require('koa');
const app = new Koa();
app.use(async (ctx, next) => {
await next();
ctx.type = 'text/html';
ctx.body = '<h1>Hello, koa2!</h2>';
});
app.listen(3000);
console.log('app started at port 3000....');
我们由上面的代码开始深入到koa的源码:
application.js文件:
上面代码的开头引入koa框架,接着const app = new Koa();创建koa实例app,koa的构造函数很简单,如下:
constructor() {
super();
this.proxy = false;
this.middleware = []; //用来存放中间件
this.subdomainOffset = 2;
this.env = process.env.NODE_ENV || 'development'; //运行环境
this.context = Object.create(context); //创建context对象
this.request = Object.create(request); //创建request对象
this.response = Object.create(response); //创建response对象
}
use函数:
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);
}
debug('use %s', fn._name || fn.name || '-');
this.middleware.push(fn);
return this;
}
use函数首先判断参数是否是函数,不是就报错,然后判断这个函数是否是generator函数,如果是generator则需要转换一下,通过两个判断后,将这个函数push到middleware数组中保存.最后返回this(也是app实例)
listen函数:
isten() {
debug('listen');
const server = http.createServer(this.callback());
return server.listen.apply(server, arguments);
}
listen函数里面调用http.createServe()创建http服务,关键是参数this.callback(),看一下代码:
callback() {
const fn = compose(this.middleware);
if (!this.listeners('error').length) this.on('error', this.onerror);
const handleRequest = (req, res) => {
res.statusCode = 404;
const ctx = this.createContext(req, res);
const onerror = err => ctx.onerror(err);
const handleResponse = () => respond(ctx);
onFinished(res, onerror);
return fn(ctx).then(handleResponse).catch(onerror);
};
return handleRequest;
}
首先，把所有middleware进行了组合，使用了koa-compose，我们也不用去管他的内部实现，简单来说就是返回了一个promise数组的递归调用。
这里的 const fn = compose(this.middleware);对应的调用代码如下:(查看koa-compose源码):
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, function next () {
return dispatch(i + 1)
}))
} catch (err) {
return Promise.reject(err)
}
}
}
}
return前面的作用是做参数检测,return后面也就是上面贴出来的代码才是我们要关注的:
运行流程:
i = 0 ==> index = 0 ==> fn = middleware[0] ==> return Promise.resolve(//如果fn里面存在await,则functions next()函数会被掉用, 则运行return dispatch(i + 1),以此类推)
知道中间件(当然一般指最后一个中间件)中不存在await或者所有的中间件都加载完毕(i === middleware.length) ,compose函数则最终返回.
例如:
const Koa = require('koa')
const app = new Koa()
app.use(async function (ctx, next) {
console.log('>> one');
await next();
console.log('<< one');
});
app.use(ctx => {
ctx.body='hello world gcy';
})
上面代码注册了两个中间件,经过const fn = compose(this.middleware)后返回:
fn的形式如下:
Promise.resolve(function(ctx) {
console.log('>> one');
return Promose.resolve(function(ctx){
ctx.body='hello world gcy';
}).then(() => {
console.log('<< one');
})
})
执行结果: 后台输出:>> one -- > 页面输出:hello world gcy --> 后台输出:<< one
接下来:
if (!this.listeners('error').length) this.on('error', this.onerror);
在处理http请求之前,koa会注册一个默认的错误处理函数,但我们每次http请求错误实际上是由ctx.onerror处理的:
const onerror = err => ctx.onerror(err);
onFinished(res, onerror);
fn(ctx).then(() => respond(ctx)).catch(onerror)
ctx.onFinished 是确保一个流在关闭、完成和报错时都会执行相应的回调函数。onerror 就是我们http请求错误处理函数.
我们看看这个匿名函数，把http code默认设置为404，接着利用createContext函数把node返回的req和res进行了组合创建出context
来看下createContext函数:
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;
}
这里面都是一堆的组合和赋值，context,request, response相互挂载
值得注意的是:context.req/context.res 和context.request/context.response的区别,context.req/context.res代表nodejs的req和res对象,而context.request/context.response是koa的request和response对象
这个函数最后返回context,然后传入fn函数,此时fn函数被执行.
callback()函数中调用的respond函数里面不过是一些收尾工作，例如判断http code为空如何输出啦，http method是head如何输出啦，body返回是流或json时如何输出。
context.js
delegate(proto, 'request') //Request相关方法委托,从而让context作为调用入口
onerror(err) //中间件执行过程中异常处理逻辑
request.js,response.js
分别对res和req进行了抽象和封装