思维导图：

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实现