思维导图：
Koa.png
源码解读
我们经常会像下边这样用：
const app = new Koa();
app.use(router.routes());
app.listen(3000, () => {
console.log('server start');
});
1.new Koa生成的实例app具有以下的属性和方法：
image.png
2.app.use()会将所有的中间件push到middleware数组中；
use(fn) {
this.middleware.push(fn);
return this;
}
3.调用listen方法，会创建一个server服务，并监听。其实我们需要重点关注的是this.callback()方法：
listen(...args) {
const server = http.createServer(this.callback());
return server.listen(...args);
}
在不引入Koa，搭建http服务时，我们通常是这样做的：
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(3000);
结合上边的两端代码，我们会发现，其实，Koa是将创建http服务封装成自己的listen方法，所以可以推断callback()应该会返回一个函数，且该函数携带req、res参数。那么接下来一起来看看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 (ctx, fn) => {
const res = ctx.res;
res.statusCode = 404;
const onerror = err => ctx.onerror(err);
onFinished(res, onerror);
return fn(ctx).then(() => respond(ctx)).catch(onerror); // respond就是我们根据 ctx 中的数据，然后集中的向 res 中写入数据，响应 http 请求
}()
};
return handleRequest;
}
通过createContext函数创建ctx，最后会将ctx传入中间件组成的嵌套函数fn中。
compose方法是Koa洋葱模型的核心：
function compose (middleware) {
return function (context, next) {
let index = -1;
return dispatch(0);
function dispatch (i) {
index = i;
let fn = middleware[i];
if (!fn) return Promise.resolve();
return Promise.resolve(fn(context, function next () {
return dispatch(i + 1);
}));
}
}
}
createContext方法，会创建context对象，然后就是各种赋值：
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.state = {};
return context;
}
赋值后的koa如⬇️：
image.png
koa中http旅程:
image.png
koa结构为洋葱模型，如上图。当请求到来时，每个中间件都会被执行两次，以next为分界线，next左边为请求过程，next右边为相应过程。一般我们会在最后／里一个中间件去请求后台接口，将请求到的数据放到ctx中，然后再由里至外／由左至右执行一遍中间件，返回至最顶层中间件，这个过程也就是在执行yield next()之后的代码。
参考文章：
Koa源码分析、十分钟带你看完 KOA 源码、最简Koa实现
网友评论