Koa2源码阅读笔记-白红宇

Koa2源码阅读笔记

阅读量：6908 次

发布时间：2019-06-27

本文共 6565 字，大约阅读时间需要 21 分钟。

引言

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

下面是我读完之后的一些感受。

Koa的设计理念

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

Koa基本组成

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

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

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

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

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

application.js

// application.jsmodule.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.xvar app = koa();// koa 2.x// 使用class必须使用new来调用var app = new koa();

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

use函数

// application.jsuse(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数组。

listen函数

// application.jslisten(...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.jscallback() {  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-composefunction 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.jscreateContext(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

content.js 主要的功能提供了对request和response对象的方法与属性便捷访问能力。

其中使用了（有兴趣的可以看一下），将context.request与context.response上的方法与属性代理到context上。

在源码中，我们可以看到：

// context.jsdelegate(proto, 'response')  .method('attachment')  // ...  .access('status')  // ...  .getter('writable');delegate(proto, 'request')  .method('acceptsLanguages')  // ...  .access('querystring')  // ...  .getter('ip');

request.js

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

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

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