HJM's Blog

带你走进koa2的世界(koa2源码浅谈)

2017年5月10日 16:32

最近使用koa2搭建博客,async/await异步流程控制确实比较优雅,但是在使用koa2过程中也遇到不少的问题,如何编写中间件,如何替换express中间件为koa中间件,还有在实现服务端渲染的时候由于koa对于response有自己的封装,当时也花了很多时间去调bug。觉得以上问题很多也是归根于自己对框架的不熟悉引起的,所以花了点时间阅读了下koa源码,分享下阅读时收获的东西以及koa2框架相关的分析。

koa2核心设计

koa2划分浅析

下图是我从node_modules目录下截的,koa核心就在这两部分,一个koa本身,一个中间件的合成流程控制koa-compose

koa关键目录

这里先简略介绍koa2的各部分吧,后面再讲流程

application.js

这个就是koa的入口主要文件,暴露应用的class, 这个class继承自node自带的events,这里就可以看出跟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就是应用,暴露了一些公用的api,比如两个常见的,一个是listen,一个是use, listen就是调用http.createServer,传入callback,当然这个callback就是核心,它里面包含了中间件的合并,上下文的处理,对res的特殊处理(后面说流程会细说,这里先粗略讲讲),use的话用得就更多了,中间件往往是web框架的主要部分,但是use其实就是很简单起到收集中间件的作用而已,重点在于如何组合它们,如何设计请求到来时如何调用中间件,这些东西其实都在koa-compose

context.js

这部分就是koa的应用上下文ctx,其实就一个简单的对象暴露,里面的重点在delegate,这个就是代理,这个就是为了开发者方便而设计的,比如我们要访问ctx.repsponse.status但是我们通过delegate,可以直接访问ctx.status访问到它(这个实现也不是很复杂,后面再讲)

request.js、response.js

这两部分就是对原生的res、req的一些操作了,大量使用es6的getset的一些语法,去取headers或者设置headers、还有设置body等等,这些就不详细介绍了,有兴趣的读者可以自行看源码

koa2流程控制/中间件

一个简单的koa应用

我们就先从简单的koa应用开始

// 这里就先不用async/await
// 它们并不是必须的
var koa = require('koa');
var app = new koa();

app.use((ctx, next) => {
  console.log(1)
  next();
  console.log(5)
});

app.use((ctx, next) => {
  console.log(2)
  next();
  console.log(4)
});

app.use((ctx, next) => {
  console.log(3)
  ctx.body = 'Hello World';
});

app.listen(3000);
// 访问http://localhost:3000
// 打印出1、2、3、4、5

上述简单的应用打印出1、2、3、4、5,这个其实就是koa中间件控制的核心,一个洋葱结构,从上往下一层一层进来,再从下往上一层一层回去,乍一看很复杂,为什么不直接一层一层下来就结束呢,就像express/connect一样,我们就只要next就去下一个中间件,干嘛还要回来?

其实这就是为了解决复杂应用中频繁的回调而设计的级联代码,并不直接把控制权完全交给下一个中间件,而是碰到next去下一个中间件,等下面都执行完了,还会执行next以下的内容

解决频繁的回调,这又有什么依据呢?举个简单的例子,假如我们需要知道穿过中间件的时间,我们使用koa可以轻松地写出来,但是使用express呢,可以去看下express reponse-time的源码,它就只能通过监听header被write out的时候然后触发回调函数计算时间,但是koa完全不用写callback,我们只需要在next后面加几行代码就解决了(直接使用.then()都可以)

// koa-guide v1的示例代码就是计算中间件穿越时间

var koa = require('koa');
var app = koa();

// x-response-time
app.use(function *(next){
  // (1) 进入路由
  var start = new Date;
  yield next;
  // (5) 再次进入 x-response-time 中间件,记录2次通过此中间件「穿越」的时间
  var ms = new Date - start;
  this.set('X-Response-Time', ms + 'ms');
  // (6) 返回 this.body
});

// logger
app.use(function *(next){
  // (2) 进入 logger 中间件
  var start = new Date;
  yield next;
  // (4) 再次进入 logger 中间件,记录2次通过此中间件「穿越」的时间
  var ms = new Date - start;
  console.log('%s %s - %s', this.method, this.url, ms);
});

// response
app.use(function *(){
  // (3) 进入 response 中间件,没有捕获到下一个符合条件的中间件,传递到 upstream
  this.body = 'Hello World';
});

app.listen(3000);

koa-compose源码分析

这里你应该就对如何实现感兴趣了,这里目光就得转到koa-compose,
其实代码就这么点

const Promise = require('any-promise')
// 这里使用any-promise是为了兼容低版本node
module.exports = 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 // 这里维护一个index的闭包
    return dispatch(0) // 从数组的第一个元素开始`dispatch`
    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()  //这两行就是来处理最后一个中间件还有next的情况的,其实是可以直接resolve出来的
      try {
            // 这里就是传入next执行中间件代码了
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

我稍微注释了一下代码

其实这部分要跟application.js中的callback 结合起来看

/**
   * Return a request handler callback
   * for node's native http server.
   *
   * @return {Function}
   * @api public
   */

  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的作用就是http.createServer(app.callback()).listen(...)

这里开始讲重点,koa-compose从语义上看就是组合,其实就是对koa中间件的组合,它返回了一个promise,执行完成后就执行koa2对res的特殊处理,最后res.end()

当然我们关心的是如何对中间件组合,其实就是传入一个middleware数组
然后第一次取出数组的第一个元素,传入context和next代码,执行当前这个元素(这个中间件)

// 这里就是传入next执行中间件代码了
return Promise.resolve(fn(context, function next () {
    return dispatch(i + 1)
}))

其实后面根本没用到resolve的内容,这部分代码等价于

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

核心就在于dispatch(i + 1),不过也很好理解嘛,就是将数组指针移向下一个,执行下一个中间件的代码
然后一直这样到最后一个中间件,假如最后一个中间件还有next那么下面这两段代码就起作用了

 if (i === middleware.length) fn = next 
 if (!fn) return Promise.resolve()

因为middleware没有下一个了,并且其实外面那个next是空的,所以其实就可以return结束了

这里其实直接return就行了,这里的return Promise.resolve()其实是没有用的,真正return出外面的是调用第一个中间件的resolve

嗯嗯,这样其实就结束了,一整套的中间件调用
读者可能还想问,不是洋葱结构吗?那怎么回去的呢?其实回去的代码其实就是函数压栈和出栈

看完以下代码你就懂了(其实这就是koa的中间件原理)

function a() {
    console.log(1)
    b();
    console.log(5)
    return Promise.resolve();
}
function b() {
    console.log(2)
    c();
    console.log(4)
}

function c() {
    console.log(3)
    return;
}
a();
// 输出1、2、3、4、5

koa2处理流程

一图胜千言
koa2核心设计
我就粗浅划分为几部分吧

  • 初始化应用
  • 请求到来-创建上下文部分
  • 请求到来-中间件执行部分
  • 返回res特殊处理部分

初始化应用部分

首先就是我们的app.js代码,初始的时候就是我们new了个koa实例,然后开始写各种use,写个app.listen(3000);
use其实就是把你写的函数一个一个收集到一个middleware数组,listen的话就是http.createServer(app.callback()).listen(...)

请求到来-创建上下文部分

当一个请求过来的时候,由http.createServer的callback知道,它是可以传入req、res的,所以其实从这个入口可以拿到req、res,koa拿到后就createContext创建应用上下文,根据context.js、request.js、response.js创建,并且进行属性代理delegate

请求到来-中间件执行部分

请求到来执行了中间件的一系列流程,使用koa-compose将传入的middleware组合起来,然后返回了一个promise, 其实真正传入http.createServer callback的就下面(我简写了)

http.createServer((req, res) => {
 // ... 通过req,res创建上下文
 // fn是`koa-compose`返回的promise
 return fn(ctx).then(handleResponse).catch(onerror);
})

返回res特殊处理部分

我们上一部分可以看到一个handleResponse,它是什么?其实我们到这里还没有res.end(), koa前面其实都是使用ctx.body = xxx,那它是怎么write回res的呢,这部分逻辑就在function respond(){},handleResponse就以下一句

const handleResponse = () => respond(ctx);

respond到底做了什么呢,其实它就是判断你之前中间件写的body的类型,做一些处理,然后使用res.end(body)
到这里就结束了,返回了页面

读者到这里可以再看看那张图就比较清晰了

小插曲

Object.create(X.prototype) VS new X

在源码阅读时大量看到Object.create()的用法,这个又跟new X()有什么区别呢

引用下stackoverflow答案
http://stackoverflow.com/questions/4166616/understanding-the-difference-between-object-create-and-new-somefunction

new Test():

1.create new Object() obj
2.set obj.__proto__ to Test.prototype
3.return Test.call(obj) || obj;
// normally obj is returned but constructors in JS can return a value

Object.create( Test.prototype )

1.create new Object() obj
2.set obj.__proto__ to Test.prototype
3.return obj;

可以看到其实new和Object.create前两个步骤都是一样,区别在第三步,其实就是Object.create不会执行构造函数,我们来两段更直接的代码

var a = new A();
var b = Object.create(B.prototype)
function A() {
    console.log('a')
}
function B() {
    console.log('b')
}
// 我们可以看到只输出了a,但是b并没有输出
var a = new A();
var b = Object.create(B.prototype)
function A() {
  return {}
}
function B() {
  return {}
}
console.log(a)
console.log(b)
// 可以看到a就是{}
// b是一个对象,它的__proto__指向B.prototype

这样应该就很清晰了,Object.create()特殊还在于它的第二个参数,就像Object.defineProperties()可以定义新的属性或修改现有属性

delegates

koa2里有一堆属性代理,为了方便开发者更容易访问到一些属性,koa设计了一些属性代理,可以用ctx.body之类的去访问ctx.response.body,调用也很简单,诸如以下

delegate(proto, 'response')
  .method('attachment')
  .method('redirect')
  .method('remove'
  .method('vary')
  .method('set')
  .method('append')
  .method('flushHeaders')
  .access('status')
  .access('message')
  .access('body')
  .access('length')
  .access('type')
  .access('lastModified')
  .access('etag')
  .getter('headerSent')
  .getter('writable');

其实这个实现很简单
我们简单来说下method代理,其他同理
这里我们用obj.foo来替代obj.request.foo

function method(proto, target, name) {
    proto[name] = function() {
        return proto[target][name].apply(proto[target], arguments)
    }
}
var obj = {};
obj.request = {
    foo: function(bar) {
       console.log(bar)
       console.log(this)
       return bar;
    }
}
method(obj, 'request', 'foo')
obj.foo('123')
// 输出123
// this输出obj.request

最后

谢谢阅读~
欢迎follow我哈哈https://github.com/BUPT-HJM
欢迎继续观光我的新博客~(老博客近期可能迁移)
我的博客也是关于koa2的一个实践,欢迎star😸
https://github.com/BUPT-HJM/vue-blog

欢迎关注