koa2 源码解读

前言

自从在简历上写了使用过nodejs的koa框架起，我被面试官问起node和koa的次数呈指数上涨，为了防止一问三不知的情况再次发生决心去阅读源码。

主要文件

application.js koa框架的入口文件
context.js 创建网络请求的上下文对象
request.js 用于包装koa的request对象
response.js 用于包装koa的response对象

源码核心

首先我们看下不使用koa和使用的区别

const http = require("http");

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello World\n");
});

const hostname = "127.0.0.1";
const port = 3000;
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

const koa = require('koa');
const app = new koa();
app.use(async (ctx,next) => {
    ctx.body = 'hi';
})
app.listen(3000,()=>{})

首先在new的时候构造了application对象,也就是application.js的

constructor(options) {
    super();
    options = options || {};
    this.proxy = options.proxy || false;
    this.subdomainOffset = options.subdomainOffset || 2;
    this.proxyIpHeader = options.proxyIpHeader || 'X-Forwarded-For';
    this.maxIpsCount = options.maxIpsCount || 0;
    this.env = options.env || process.env.NODE_ENV || 'development';
    if (options.keys) this.keys = options.keys;
    this.middleware = [];
    this.context = Object.create(context);
    this.request = Object.create(request);
    this.response = Object.create(response);
    // util.inspect.custom support for node 6+
    /* istanbul ignore else */
    if (util.inspect.custom) {
      this[util.inspect.custom] = this.inspect;
    }
  }

执行完在调用application.use方法,该方法会去判断传入的参数是否是一个函数再判断是否是一个生成器(generator)函数，如果是那么就使用koa-convert将该函数转换成一个async 函数，然后把它放入中间件数组。

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

调用listen()函数，在listen函数中我们可以看到，开启了一个http服务并传入了callback() 函数

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

接下来看callback()函数,这里使用了一个compose()函数（这个函数很重要）,那么它是干什么的呢？

  callback() {
    const fn = compose(this.middleware);

    if (!this.listenerCount('error')) this.on('error', this.onerror);

    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res);
      return this.handleRequest(ctx, fn);
    };

    return handleRequest;
  }

它的主要功能是去递归执行middleware数组中的中间件函数，并返回一个Promise，compose()函数是实现koa 洋葱模型的关键.

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }
  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 {
      	// 执行到这儿会去调用下一个中间件 dispatch.bind(null, i + 1))，就是next()函数
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

把中间件函数递归完后，执行createContext()，可以看到其实就是创建了一个新的context对象并接入原型链创建的request，request同样接入原型

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

通过这样的方式返回了一个上下文，然后回去执行return handleRequest(ctx,fn)

  handleRequest(ctx, fnMiddleware) {
    const res = ctx.res;
    res.statusCode = 404;
    const onerror = err => ctx.onerror(err);
    const handleResponse = () => respond(ctx);
    onFinished(res, onerror);
    return fnMiddleware(ctx).then(handleResponse).catch(onerror);
  }

到此核心源码就差不多了。看完觉得醍醐灌顶。（当然这种状态持续不了多久）OK这篇水文就先到这里结束。