Koa2源码阅读笔记

摘要：引言最近空闲时间读了一下的源码在阅读的源码的过程中，我的感受是代码简洁思路清晰不得不佩服大神的水平。调用的时候就跟有区别使用必须使用来调用除了上面的的构造函数外，还暴露了一些公用的，比如两个常见的，一个是，一个是。

最近空闲时间读了一下Koa2的源码；在阅读Koa2(version 2.2.0)的源码的过程中，我的感受是代码简洁、思路清晰（不得不佩服大神的水平）。
下面是我读完之后的一些感受。

Koa 是一个轻量级的、极富表现力的 http 框架。
一个web request会通过 Koa 的中间件栈，来动态完成 response 的处理。
Koa2 采用了 async 和 await 的语法来增强中间件的表现力。
Koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库。

Koa源码非常精简，只有四个文件：

application.js：框架入口；负责管理中间件，以及处理请求

context.js：context对象的原型，代理request与response对象上的方法和属性

request.js：request对象的原型，提供请求相关的方法和属性

response.js：response对象的原型，提供响应相关的方法和属性

// application.js

module.exports = class Application extends Emitter {
  constructor() {
    super();

    this.proxy = false; // 是否信任 proxy header 参数，默认为 false
    
    this.middleware = []; //保存通过app.use(middleware)注册的中间件
    
    this.subdomainOffset = 2; // 子域默认偏移量，默认为 2
    
    this.env = process.env.NODE_ENV || "development"; // 环境参数，默认为 NODE_ENV 或 ‘development’
    
    this.context = Object.create(context); //context模块，通过context.js创建
    
    this.request = Object.create(request); //request模块，通过request.js创建
    
    this.response = Object.create(response); //response模块，通过response.js创建
  }

  // ...
}

application.js 是 koa 的入口主要文件，暴露应用的 class, 这个 class 继承自 EventEmitter ，这里可以看出跟 koa1.x 的不同，koa1.x 是用的是构造函数的方式，koa2 大量使用 es6 的语法。调用的时候就跟 koa1.x 有区别

var koa = require("koa");
// koa 1.x
var app = koa();
// koa 2.x
// 使用class必须使用new来调用
var app = new koa();

application.js除了上面的的构造函数外，还暴露了一些公用的api，比如两个常见的，一个是listen，一个是use。

// application.js

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函数做的事很简单：注册一个中间件fn，其实就是将fn放入middleware数组。

// application.js

listen(...args) {
  debug("listen");
  const server = http.createServer(this.callback());
  return server.listen(...args);
}

listen方法首先会通过this.callback方法来返回一个函数作为http.createServer的回调函数，然后进行监听。我们已经知道，http.createServer的回调函数接收两个参数：req和res，下面来看this.callback的实现：

// application.js

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;
}

首先，callback方法把所有middleware进行了组合，使用了koa-compose，我们来看一下koa-compose的代码：

// koa-compose

function compose (middleware) {
// 传入的middleware必须是一个数组
  if (!Array.isArray(middleware)) throw new TypeError("Middleware stack must be an array!")
// 传入的middleware的每一个元素都必须是函数
  for (const fn of middleware) {
    if (typeof fn !== "function") throw new TypeError("Middleware must be composed of functions!")
  }

  return function (context, next) {
    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]
      //下面两行代码是处理最后一个中间件还有next的情况的，其实就是直接resolve出来
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve() 
      try {
        // 这里就是传入next执行中间件代码了
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

可以看到koa-compose基本就是个dispatch函数的递归调用。其中最重要的就是下面这段代码：

return Promise.resolve(fn(context, function next () {
  return dispatch(i + 1)
}))

这段代码等价于：

fn(context, function next () {
 return dispatch(i + 1)
})
return Promise.resolve()

这里middlewareFunction的第二个参数(也就是next)是动态传递进去的信使，它会调取dispatch(index)执行下一个的middleware。最后会返回一个Resolved（已完成）状态的Promise对象。这个对象的作用我们稍后再说。

我们先暂时回到callback方法里面，前面说了它先对middleware进行了组合，生成了一个函数fn。
然后，callback方法返回http.createServer所需要的回调函数handleRequest。

handleRequest函数，先把http code默认设置为404，接着利用createContext函数把node返回的req和res进行了封装创建出context，
然后通过onFinished(res, onerror)监听http response，当请求结束时执行回调。这里传入的回调是context.onerror(err)，即当错误发生时才执行。
最后返回 fn(ctx).then(handleResponse).catch(onerror)的执行结果，这里的fn函数就是就是组合所有middleware后生成的函数，调用它执行所有middleware后会返回前面提到的Resolved（已完成）状态的Promise对象，之后执行响应处理函数respond(ctx)（respond函数里面也主要是一些收尾工作，例如判断http code为空如何输出啦，http method是head如何输出啦，body返回是流或json时如何输出；代码就不贴了，感兴趣的小伙伴自己可以去看一下），当抛出异常时同样使用 context.onerror(err)处理。

我们可以看看createContext函数

// application.js

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;
}

createContext创建context的时候，还会同时创建request和response，通过下图可以比较直观地看到所有这些对象之间的关系。

图中：

最左边一列表示每个文件的导出对象

中间一列表示每个Koa应用及其维护的属性

右边两列表示对应每个请求所维护的一些列对象

黑色的线表示实例化

红色的线表示原型链

蓝色的线表示属性

通过上面的分析，我们已经可以大概得知Koa处理请求的过程：当请求到来的时候，会通过 req 和 res 来创建一个 context (ctx) ，然后执行中间件。

content.js 主要的功能提供了对request和response对象的方法与属性便捷访问能力。
其中使用了node-delegates（有兴趣的可以看一下源码），将context.request与context.response上的方法与属性代理到context上。
在源码中，我们可以看到：

// context.js

delegate(proto, "response")
  .method("attachment")
  // ...
  .access("status")
  // ...
  .getter("writable");

delegate(proto, "request")
  .method("acceptsLanguages")
  // ...
  .access("querystring")
  // ...
  .getter("ip");

request.js 封装了请求相关的属性以及方法。通过 application.js 中的createContext方法，代理对应的 request 对象。

const request = context.request = Object.create(this.request);
// ...
context.req = request.req = response.req = req;
// ...
request.response = response;

request.req为原生的请求对象，在 request.js 中属性的获取都是通过 ths.req来获取的（即 request.req）。

response.js 封装了响应相关的属性以及方法。与 request 相同，通过createContext方法代理对应的 response 对象。

const response = context.response = Object.create(this.response);
// ...
context.res = request.res = response.res = res;
// ...
response.request = request;

关于Koa2的源码就先分析到这，希望对大家有所帮助。
如有不同的看法，欢迎交流！