koa的基礎(chǔ)結(jié)構(gòu)

首先，讓我們認(rèn)識一下koa框架的定位——koa是一個精簡的node框架：

• 它基于node原生req和res，封裝自定義的request和response對象，并基于它們封裝成一個統(tǒng)一的context對象。
• 它基于async/await（generator）的洋蔥模型實現(xiàn)了中間件機制。

koa框架的核心目錄如下：

── lib
   ├── application.js
   ├── context.js
   ├── request.js
   └── response.js

// 每個文件的具體功能
── lib
   ├── new Koa()  || ctx.app
   ├── ctx
   ├── ctx.req  || ctx.request
   └── ctx.res  || ctx.response
復(fù)制代碼

koa源碼基礎(chǔ)骨架

application.js application.js是koa的主入口，也是核心部分，主要干了以下幾件事情：

1. 完成了koa實例初始化的工作，啟動服務(wù)器
2. 實現(xiàn)了洋蔥模型的中間件機制
3. 封裝了高內(nèi)聚的context對象
4. 實現(xiàn)了異步函數(shù)的統(tǒng)一錯誤處理機制

context.js context.js主要干了兩件事情：

1. 完成了錯誤事件處理
2. 代理了response對象和request對象的部分屬性和方法

request.js request對象基于node原生req封裝了一系列便利屬性和方法，供處理請求時調(diào)用。所以當(dāng)你訪問ctx.request.xxx的時候，實際上是在訪問request對象上的setter和getter。

response.js response對象基于node原生res封裝了一系列便利屬性和方法，供處理請求時調(diào)用。所以當(dāng)你訪問ctx.response.xxx的時候，實際上是在訪問response對象上的setter和getter。

4個文件的代碼結(jié)構(gòu)如下：

koa工作流

Koa整個流程可以分成三步:

1. 初始化階段

new初始化一個實例，包括創(chuàng)建中間件數(shù)組、創(chuàng)建context/request/response對象，再使用use(fn)添加中間件到middleware數(shù)組，最后使用listen 合成中間件fnMiddleware，按照洋蔥模型依次執(zhí)行中間件，返回一個callback函數(shù)給http.createServer，開啟服務(wù)器，等待http請求。結(jié)構(gòu)圖如下圖所示：

2. 請求階段

每次請求，createContext生成一個新的ctx，傳給fnMiddleware，觸發(fā)中間件的整個流程。3. 響應(yīng)階段 整個中間件完成后，調(diào)用respond方法，對請求做最后的處理，返回響應(yīng)給客戶端。

koa中間件機制與實現(xiàn)

koa中間件機制是采用koa-compose實現(xiàn)的，compose函數(shù)接收middleware數(shù)組作為參數(shù)，middleware中每個對象都是async函數(shù)，返回一個以context和next作為入?yún)⒌暮瘮?shù)，我們跟源碼一樣，稱其為fnMiddleware在外部調(diào)用this.handleRequest的最后一行，運行了中間件：fnMiddleware(ctx).then(handleResponse).catch(onerror);

以下是koa-compose庫中的核心函數(shù)：

我們不禁會問：中間件中的next到底是什么呢？為什么執(zhí)行next就進入到了下一個中間件了呢？中間件所構(gòu)成的執(zhí)行棧如下圖所示，其中next就是一個含有dispatch方法的函數(shù)。在第1個中間件執(zhí)行next時，相當(dāng)于在執(zhí)行dispatch(2)，就進入到了下一個中間件的處理流程。因為dispatch返回的都是Promise對象，因此在第n個中間件await next()時，就進入到了第n+1個中間件，而當(dāng)?shù)趎+1個中間件執(zhí)行完成后，可以返回第n個中間件。但是在某個中間件中，我們沒有寫next()，就不會再執(zhí)行它后面所有的中間件。運行機制如下圖所示：

koa-convert解析

在koa2中引入了koa-convert庫，在使用use函數(shù)時，會使用到convert方法（只展示核心的代碼）：

const convert = require('koa-convert');

module.exports = class Application extends Emitter {
    use(fn) {
        if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
        if (isGeneratorFunction(fn)) {
            deprecate('Support for generators will be removed';
            fn = convert(fn);
        }
        debug('use %s', fn._name || fn.name || '-');
        this.middleware.push(fn);
        return this;
    }
}
復(fù)制代碼

koa2框架針對koa1版本作了兼容處理，中間件函數(shù)如果是generator函數(shù)的話，會使用koa-convert進行轉(zhuǎn)換為“類async函數(shù)”。首先我們必須理解generator和async的區(qū)別：async函數(shù)會自動執(zhí)行，而generator每次都要調(diào)用next函數(shù)才能執(zhí)行，因此我們需要尋找到一個合適的方法，讓next()函數(shù)能夠一直持續(xù)下去即可，這時可以將generator中yield的value指定成為一個Promise對象。下面看看koa-convert中的核心代碼：

const co = require('co')
const compose = require('koa-compose')

module.exports = convert

function convert (mw) {
  if (typeof mw !== 'function') {
    throw new TypeError('middleware must be a function')
  }
  if (mw.constructor.name !== 'GeneratorFunction') {
    return mw
  }
  const converted = function (ctx, next) {
    return co.call(ctx, mw.call(ctx, createGenerator(next)))
  }
  converted._name = mw._name || mw.name
  return converted
}
復(fù)制代碼

首先針對傳入的參數(shù)mw作校驗，如果不是函數(shù)則拋異常，如果不是generator函數(shù)則直接返回，如果是generator函數(shù)則使用co函數(shù)進行處理。co的核心代碼如下：

function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1);
  
  return new Promise(function(resolve, reject) {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFulfilled();
    
    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
      return null;
    }

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    function next(ret) {
      if (ret.done) return resolve(ret.value);
      var value = toPromise.call(ctx, ret.value);
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}
復(fù)制代碼

由以上代碼可以看出，co中作了這樣的處理：

1. 把一個generator封裝在一個Promise對象中
2. 這個Promise對象再次把它的gen.next()也封裝出Promise對象，相當(dāng)于這個子Promise對象完成的時候也重復(fù)調(diào)用gen.next()
3. 當(dāng)所有迭代完成時，對父Promise對象進行resolve

以上工作完成后，就形成了一個類async函數(shù)。

異步函數(shù)的統(tǒng)一錯誤處理機制

在koa框架中，有兩種錯誤的處理機制，分別為：

1. 中間件捕獲
2. 框架捕獲

中間件捕獲是針對中間件做了錯誤處理響應(yīng)，如fnMiddleware(ctx).then(handleResponse).catch(onerror)，在中間件運行出錯時，會觸發(fā)onerror監(jiān)聽函數(shù)。框架捕獲是在context.js中作了相應(yīng)的處理this.app.emit('error', err, this)，這里的this.app是對application的引用，當(dāng)context.js調(diào)用onerror時，實際上是觸發(fā)application實例的error事件 ，因為Application類是繼承自EventEmitter類的，因此具備了處理異步事件的能力，可以使用EventEmitter類中對于異步函數(shù)的錯誤處理方法。

koa為什么能實現(xiàn)異步函數(shù)的統(tǒng)一錯誤處理？因為async函數(shù)返回的是一個Promise對象，如果async函數(shù)內(nèi)部拋出了異常，則會導(dǎo)致Promise對象變?yōu)閞eject狀態(tài)，異常會被catch的回調(diào)函數(shù)(onerror)捕獲到。如果await后面的Promise對象變?yōu)閞eject狀態(tài)，reject的參數(shù)也可以被catch的回調(diào)函數(shù)(onerror)捕獲到。

委托模式在koa中的應(yīng)用

delegates庫由知名的 TJ 所寫，可以幫我們方便快捷地使用設(shè)計模式當(dāng)中的委托模式，即外層暴露的對象將請求委托給內(nèi)部的其他對象進行處理。

delegates 基本用法就是將內(nèi)部對象的變量或者函數(shù)綁定在暴露在外層的變量上，直接通過 delegates 方法進行如下委托，基本的委托方式包含：

• getter：外部對象可以直接訪問內(nèi)部對象的值
• setter：外部對象可以直接修改內(nèi)部對象的值
• access：包含 getter 與 setter 的功能
• method：外部對象可以直接調(diào)用內(nèi)部對象的函數(shù)

delegates 原理就是__defineGetter__和__defineSetter__。在application.createContext函數(shù)中，被創(chuàng)建的context對象會掛載基于request.js實現(xiàn)的request對象和基于response.js實現(xiàn)的response對象。下面2個delegate的作用是讓context對象代理request和response的部分屬性和方法：

做了以上的處理之后，context.request的許多屬性都被委托在context上了，context.response的許多方法都被委托在context上了，因此我們不僅可以使用this.ctx.request.xx、this.ctx.response.xx取到對應(yīng)的屬性，還可以通過this.ctx.xx取到this.ctx.request或this.ctx.response下掛載的xx方法。

我們在源碼中可以看到，response.js和request.js使用的是get set代理，而context.js使用的是delegate代理，為什么呢？因為delegate方法比較單一，只代理屬性；但是使用set和get方法還可以加入一些額外的邏輯處理。在context.js中，只需要代理屬性即可，使用delegate方法完全可以實現(xiàn)此效果，而在response.js和request.js中是需要處理其他邏輯的，如以下對query作的格式化操作：

get query() {
  const str = this.querystring;
  const c = this._querycache = this._querycache || {};
  return c[str] || (c[str] = qs.parse(str));
}
復(fù)制代碼

到這里，相信你對koa2的原理實現(xiàn)有了更深的理解吧？

回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~

點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章