Koa是一款設(shè)計(jì)優(yōu)雅的輕量級Node.js框架，它主要提供了一套巧妙的中間件機(jī)制與簡練的API封裝，因此源碼閱讀起來也十分輕松，不論你從事前端或是后端研發(fā)，相信都會有所收獲。

目錄結(jié)構(gòu)

首先將源碼下載到本地，可以看到Koa的源碼只包含下述四個(gè)文件：

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

application.js

application.js為Koa的主程序入口文件，在package.json的main字段有定義。它主要負(fù)責(zé)HTTP服務(wù)的注冊、封裝請求相應(yīng)對象，并初始化中間件數(shù)組并通過compose方法進(jìn)行執(zhí)行。

context.js

context.js的核心工作為將請求與響應(yīng)方法集成到一個(gè)上下文(Context)中，上下文中的大多數(shù)方法都是直接委托到了請求與響應(yīng)對象上，本身并沒做什么改變，它能為編寫Web應(yīng)用程序提供便捷。

request.js

request.js將http庫的request方法進(jìn)行抽象與封裝，通過它可以訪問到各種請求信息。

response.js

response.js與request功能類似，它是對response對象的抽象與封裝。

中間件

示例

對于Koa的中間件機(jī)制相信大家都耳熟能詳了，現(xiàn)在讓我們來看看源碼實(shí)現(xiàn)。在這里還是先舉一個(gè)最簡單的例子：

const Koa = require('koa'); const app = new Koa();app.use((ctx, next) => {console.log('enter 1');next();console.log('out 1'); });app.use((ctx, next) => {console.log('enter 2');next();console.log('out 2'); });app.use((ctx, next) => {console.log('enter 3');next();console.log('out 3'); });app.listen(3000);

現(xiàn)在讓我們來訪問應(yīng)用：curl 127.0.0.1:3000，可以看到以下輸出結(jié)果：

enter 1 enter 2 enter 3 out 3 out 2 out 1

next是什么？

通過以上的結(jié)果進(jìn)行分析，當(dāng)我們執(zhí)行next()的時(shí)候，可能程序的執(zhí)行權(quán)交給了下一個(gè)中間件，next函數(shù)會等待下一個(gè)中間件執(zhí)行完畢，然后接著執(zhí)行，這樣的執(zhí)行機(jī)制被稱為“洋蔥模型”，因?yàn)樗拖裾埱蟠┻^一層洋蔥一樣，先從外向內(nèi)一層一層執(zhí)行，再從內(nèi)向外一層一層返回，而next就是進(jìn)行下一層的一把鑰匙：

原理

聊完了理想，現(xiàn)在我們來聊現(xiàn)實(shí)。首先來看看app.use函數(shù)：

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

整個(gè)函數(shù)只做了一件事情，將中間件函數(shù)添加到了實(shí)例中的middleware數(shù)組，其他的即是對類型進(jìn)行校驗(yàn)，若不為函數(shù)則直接報(bào)TypeError，若為生成器則發(fā)出deprecated警告并使用koa-convert[注1]對其轉(zhuǎn)化。

中間件在什么時(shí)候執(zhí)行的呢？首先我們找到listen的回調(diào)函數(shù)：

const server = http.createServer(this.callback());

然后來看看這個(gè)神奇的callback函數(shù)：

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

函數(shù)首先將中間件使用koa-compose進(jìn)行處理，那個(gè)compose到底是個(gè)什么呢？不如直接來看源碼吧（省略掉了注釋與類型檢測）：

function compose (middleware) {return function (context, next) {// last called middleware #let index = -1return dispatch(0)function dispatch (i) {if (i <= index) return Promise.reject(new Error('next() called multiple times'))index = ilet fn = middleware[i]if (i === middleware.length) fn = nextif (!fn) return Promise.resolve()try {return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));} catch (err) {return Promise.reject(err)}}} }

首先我們把目光放到index與i兩個(gè)變量上，當(dāng)執(zhí)行執(zhí)行compose(middleware)函數(shù)時(shí)，會返回一個(gè)閉包函數(shù)distpach(0)，閉包函數(shù)執(zhí)行時(shí)，dispatch函數(shù)內(nèi)部的判斷邏輯如下：

若i小于等于index 則報(bào)出錯(cuò)誤：'next() called multiple times'。

若i大于index時(shí)，將i賦予index，此時(shí)i與index相等。

邏輯很簡單，但這樣做的目的是什么呢？假若程序按著預(yù)期執(zhí)行，每個(gè)中間件內(nèi)部都執(zhí)行next()，假若有3個(gè)中間件，那么當(dāng)每次執(zhí)行dispatch(i)時(shí)，到Line8之前index與i的值分別為：-1/0, 0/1, 1/2，可以看出i始終要大于index，index的閉包變量每次在執(zhí)行完函數(shù)后都會加1，因此可以知道的是若同一個(gè)中間件執(zhí)行了兩次，index就會等于i，再執(zhí)行一次index就會大于i，由此可知，index的存在意義在于限制next能執(zhí)行不超過1次。

Line9到Line11用于取出middleware中的當(dāng)前中間件，若數(shù)組為最大索引標(biāo)識，則會將fn等于next函數(shù)，意味著將再執(zhí)行一次越級的索引i + 1，由于取不到值，于是就執(zhí)行到Line11返回Promise.resolve()。

當(dāng)函數(shù)執(zhí)行到Line13，則會運(yùn)行當(dāng)前中間件，并將是否執(zhí)行下一個(gè)中間件dispatch(i + 1)的決定權(quán)傳遞到next參數(shù)，將運(yùn)行結(jié)果返回，返回函數(shù)的運(yùn)行結(jié)果的意義在于每次執(zhí)行next的返回結(jié)果都是下一個(gè)中間件的執(zhí)行結(jié)果的Promise對象。

回到callback

讓我們繼續(xù)看callback函數(shù)等剩余邏輯：

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

首先來看看Line3，因?yàn)锳pplication繼承與Emitter，故此方法是用于監(jiān)聽實(shí)例中的error事件的，當(dāng)listenerCount的數(shù)值為0時(shí)，表示沒有監(jiān)聽過，則注冊監(jiān)聽函數(shù)。

接著生成一個(gè)handleRequest回調(diào)，當(dāng)每個(gè)請求過來時(shí)，都會創(chuàng)建ctx上下文對象，并將中間件函數(shù)傳入實(shí)例方法handleRequest，讓我們來看看此時(shí)的處理函數(shù)：

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

在這里多出了幾個(gè)函數(shù)：

• on-finished，監(jiān)聽請求是否正常結(jié)束。
• respond， 當(dāng)中間件執(zhí)行完畢后，處理response對象的status與body的字段。

回到示例

回到示例，是否恍如隔日？現(xiàn)在的代碼還困擾你嗎？讓我們稍作修改：

app.use((ctx, next) => {console.log('enter 1');next();console.log('out 1'); });app.use((ctx, next) => {console.log('enter 2'); });app.use((ctx, next) => {console.log('enter 3');next();console.log('out 3'); });

此時(shí)你能準(zhǔn)確的知道執(zhí)行結(jié)果嗎？此時(shí)打印順序?yàn)?#xff1a;enter 1 -> enter 2 -> out 1。因?yàn)橹挥衝ext才是進(jìn)入到下一中間件的鑰匙。若再將程序改一改：

app.use(async (ctx, next) => {console.log('enter 1');next();console.log('out 1'); });app.use(async (ctx, next) => {console.log('enter 2');await next();console.log('out 2'); });

此時(shí)執(zhí)行結(jié)果為：enter1 -> enter2 -> out 1 -> out2，這你能答對嗎？你不需要記住范式與結(jié)果，回想一下核心的compose函數(shù)：return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))，首先中間件全為async函數(shù)，若使用await next()，則會等待下一個(gè)中間件返回resolve狀態(tài)才會執(zhí)行此代碼，如果某一個(gè)Promise中間件不使用await關(guān)鍵字呢？它會在主進(jìn)程上進(jìn)行排隊(duì)等待，等到函數(shù)執(zhí)行棧返回到當(dāng)前函數(shù)后立即執(zhí)行。對于此示例來講，當(dāng)進(jìn)入到第二個(gè)中間件，遇到await關(guān)鍵字時(shí)，console.log('out 2')則不會再執(zhí)行，而是進(jìn)入到微任務(wù)隊(duì)列中，此時(shí)主進(jìn)程已無其他任務(wù)，則函數(shù)退出當(dāng)前棧，返回到了第一個(gè)函數(shù)中，此時(shí)輸出out 1，當(dāng)?shù)谝粋€(gè)中間件執(zhí)行結(jié)束后，事件循環(huán)才會將中間件2的微任務(wù)取出來執(zhí)行，因此你見到了上述的輸出順序。

上下文

通過上述分析，我們了解到http.createServer中有一個(gè)callback函數(shù)，它不僅負(fù)責(zé)執(zhí)行compose函數(shù)，也會調(diào)用createContext方法創(chuàng)建函數(shù)上下文，源碼如下：

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

可以由這個(gè)函數(shù)得知，ctx對象包含了`context.js
request.js、response.js`的代碼。通過訪問req與res的源代碼，大家可以發(fā)現(xiàn)在request與response對象中封裝了許許多多http庫的請求方法與各類工具函數(shù)，若對http底層實(shí)現(xiàn)感興趣的小伙伴可以仔細(xì)讀一下request與response文件，否則多查閱幾遍官網(wǎng)文檔，大概了解其中的api即可。

而對于context.js，其實(shí)十分簡單，它也封裝了部分工具方法，并使用node-delegates進(jìn)行委托方法與屬性，對于此類方法的時(shí)間，估計(jì)koa3會將這一部分進(jìn)行重構(gòu)為Proxy吧。

注解

1. koa-convert轉(zhuǎn)化

在Koa版本號為1.x時(shí)，中間件都是使用Generator實(shí)現(xiàn)的，因此可以通過官方提供的koa-convert臨時(shí)對其進(jìn)行轉(zhuǎn)化與兼容，基本用法為：

function * legacyMiddleware (next) {// beforeyield next// after } app.use(convert(legacyMiddleware))

然后打開源碼發(fā)現(xiàn)，核心代碼大概如下：

function convert (mw) {return (ctx, next) => co.call(ctx, mw.call(ctx, createGenerator(next))) }

convert函數(shù)將生成器通過co進(jìn)行包裝為Promise函數(shù)，在ctx上下文進(jìn)行執(zhí)行，并傳入next函數(shù)。

總結(jié)

凡是涉及到原理性的東西，感覺自己很難避免自顧自說，用圖片進(jìn)行可視化的方式會更加直觀，易于理解，希望之后自己多多使用圖片來闡述原理。

通過源碼分析，我們知道了Koa的核心思想建立于中間件機(jī)制，它是一個(gè)設(shè)計(jì)十分簡潔、巧妙的Web框架，擴(kuò)展性極強(qiáng)，egg.js就是建立于Koa之上的上層框架。

總結(jié)

以上是生活随笔為你收集整理的Koa源码解析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。