一個學習 Koa 原始碼的例子

凹凸實驗室發表於2020-05-20

作者： MarkLin

學習目標：

原生 node 封裝

中介軟體

路由

Koa 原理

一個 nodejs 的入門級 http 服務程式碼如下，

// index.js
const http = require('http')
const server = http.createServer((req, res) => {
  res.writeHead(200)
  res.end('hello nodejs')
})

server.listen(3000, () => {
  console.log('server started at port 3000')
})

koa 的目標是更簡單化、流程化、模組化的方式實現回撥，我們希望可以參照 koa 用如下方式來實現程式碼：

// index.js
const Moa = require('./moa')
const app = new Moa()

app.use((req, res) => {
  res.writeHeader(200)
  res.end('hello, Moa')
})

app.listen(3000, () => {
  console.log('server started at port 3000')
})

所以我們需要建立一個 moa.js 檔案，該檔案主要內容是建立一個類 Moa，主要包含 use() 和 listen() 兩個方法

// 建立 moa.js
const http = require('http')

class Moa {

  use(callback) {
    this.callback = callback
  }

  listen(...args) {
    const server = http.createServer((req, res) => {
      this.callback(req, res)
    })

    server.listen(...args)
  }
}

module.exports = Moa

Context

koa 為了能夠簡化 API，引入了上下文 context 的概念，將原始的請求物件 req 和響應物件 res 封裝並掛載到了 context 上，並且設定了 getter 和 setter ，從而簡化操作

// index.js
// ...

// app.use((req, res) => {
//   res.writeHeader(200)
//   res.end('hello, Moa')
// })

app.use(ctx => {
  ctx.body = 'cool moa'
})

// ...

為了達到上面程式碼的效果，我們需要分裝 3 個類，分別是 context, request, response , 同時分別建立上述 3 個 js 檔案，

// request.js
module.exports = {
  get url() {
    return this.req.url
  }
  get method() {
    return this.req.method.toLowerCase()
  }
}

// response.js
module.exports = {
  get body() {
    return this._body
  }

  set body(val) = {
    this._body = val
  }
}

// context.js
module.exports = {
  get url() {
    return this.request.url
  }
  get body() = {
    return this.response.body
  }
  set body(val) {
    this.response.body = val
  }
  get method() {
    return this.request.method
  }
}

接著我們需要給 Moa 這個類新增一個 createContext(req, res) 的方法, 並在 listen() 方法中適當的地方掛載上：

// moa.js
const http = require('http')

const context = require('./context')
const request = require('./request')
const response = require('./response')

class Moa {
  // ...
  listen(...args) {
    const server = http.createServer((req, res) => {
      // 建立上下文
      const ctx = this.createContext(req, res)

      this.callback(ctx)

      // 響應
      res.end(ctx.body)
    })
    server.listen(...args)
  }

  createContext(req, res) {
    const ctx = Object.create(context)
    ctx.request = Object.create(request)
    ctx.response = Object.create(response)

    ctx.req = ctx.request.req = req
    ctx.res = ctx.response.res = res
  }
}

中介軟體

Koa 中間鍵機制：Koa 中介軟體機制就是函式組合的概念，將一組需要順序執行的函式複合為一個函式，外層函式的引數實際是內層函式的返回值。洋蔥圈模型可以形象表示這種機制，是 Koa 原始碼中的精髓和難點。

洋蔥圈模型

同步函式組合

假設有 3 個同步函式:

// compose_test.js
function fn1() {
  console.log('fn1')
  console.log('fn1 end')
}

function fn2() {
  console.log('fn2')
  console.log('fn2 end')
}

function fn3() {
  console.log('fn3')
  console.log('fn3 end')
}

我們如果想把三個函式組合成一個函式且按照順序來執行，那通常的做法是這樣的：

// compose_test.js
// ...
fn3(fn2(fn1()))

執行 node compose_test.js 輸出結果：

fn1
fn1 end
fn2
fn2 end
fn3
fn3 end

當然這不能叫做是函式組合，我們期望的應該是需要一個 compose() 方法來幫我們進行函式組合，按如下形式來編寫程式碼：

// compose_test.js
// ...
const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

讓我們來實現一下 compose() 函式，

// compose_test.js
// ...
const compose = (middlewares) => () => {
  [first, ...others] = middlewares
  let ret = first()
  others.forEach(fn => {
    ret = fn(ret)
  })
  return ret
}

const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

可以看到我們最終得到了期望的輸出結果：

fn1
fn1 end
fn2
fn2 end
fn3
fn3 end

非同步函式組合

瞭解了同步的函式組合後，我們在中介軟體中的實際場景其實都是非同步的，所以我們接著來研究下非同步函式組合是如何進行的，首先我們改造一下剛才的同步函式，使他們變成非同步函式,

// compose_test.js
async function fn1(next) {
  console.log('fn1')
  next && await next()
  console.log('fn1 end')
}

async function fn2(next) {
  console.log('fn2')
  next && await next()
  console.log('fn2 end')
}

async function fn3(next) {
  console.log('fn3')
  next && await next()
  console.log('fn3 end')
}
//...

現在我們期望的輸出結果是這樣的:

fn1
fn2
fn3
fn3 end
fn2 end
fn1 end

同時我們希望編寫程式碼的方式也不要改變,

// compose_test.js
// ...
const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

所以我們只需要改造一下 compose() 函式，使他支援非同步函式就即可:

// compose_test.js
// ...

function compose(middlewares) {
  return function () {
    return dispatch(0)
    function dispatch(i) {
      let fn = middlewares[i]
      if (!fn) {
        return Promise.resolve()
      }
      return Promise.resolve(
        fn(function next() {
          return dispatch(i + 1)
        })
      )
    }
  }
}

const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

執行結果：

fn1
fn2
fn3
fn3 end
fn2 end
fn1 end

完美！！！

完善 Moa

我們直接把剛才的非同步合成程式碼移植到 moa.js 中, 由於 koa 中還需要用到 ctx 欄位，所以我們還要對 compose() 方法進行一些改造才能使用：

// moa.js
// ...
class Moa {
  // ...
  compose(middlewares) {
    return function (ctx) {
      return dispatch(0)
      function dispatch(i) {
        let fn = middlewares[i]
        if (!fn) {
          return Promise.resolve()
        }
        return Promise.resolve(
          fn(ctx, function () {
            return dispatch(i + 1)
          })
        )
      }
    }
  }
}

實現完 compose() 方法之後我們繼續完善我們的程式碼，首先我們需要給類在構造的時候，新增一個 middlewares，用來記錄所有需要進行組合的函式，接著在use() 方法中把我們每一次呼叫的回撥都記錄一下，儲存到middlewares 中，最後再在合適的地方呼叫即可：

// moa.js
// ...
class Moa {
  constructor() {
    this.middlewares = []
  }

  use(middleware) {
    this.middlewares.push(middleware)
  }

  listen(...args) {
    const server = http.createServer(async (req, res) => {
      // 建立上下文
      const ctx = this.createContext(req, res)
      const fn = this.compose(this.middlewares)
      await fn(ctx)
      // 響應
      res.end(ctx.body)
    })

    server.listen(...args)
  }
  // ...
}

我們加一小段程式碼測試一下:

// index.js
//...
const delay = () => new Promise(resolve => setTimeout(() => resolve()
  , 2000))
app.use(async (ctx, next) => {
  ctx.body = "1"
  await next()
  ctx.body += "5"
})
app.use(async (ctx, next) => {
  ctx.body += "2"
  await delay()
  await next()
  ctx.body += "4"
})
app.use(async (ctx, next) => {
  ctx.body += "3"
})

執行命令 node index.js 啟動伺服器後，我們訪問頁面 localhost:3000 檢視一下，發現頁面顯示 12345 ！

到此，我們簡版的 Koa 就已經完成實現了。讓我們慶祝一下先！！！

Router

Koa 還有一個很重要的路由功能，感覺缺少路由就缺少了他的完整性，所以我們簡單介紹下如何實現路由功能。

其實，路由的原理就是根據地址和方法，呼叫相對應的函式即可，其核心就是要利用一張表，記錄下註冊的路由和方法，原理圖如下所示：

路由原理

使用方式如下：

// index.js
// ...
const Router = require('./router')
const router = new Router()

router.get('/', async ctx => { ctx.body = 'index page' })
router.get('/home', async ctx => { ctx.body = 'home page' })
router.post('/', async ctx => { ctx.body = 'post index' })
app.use(router.routes())

// ...

我們來實現下 router 這個類，先在根目錄建立一個 router.js 檔案，然後根據路由的原理，我們實現下程式碼:

// router.js
class Router {
  constructor() {
    this.stacks = []
  }

  register(path, method, middleware) {
    this.stacks.push({
      path, method, middleware
    })
  }

  get(path, middleware) {
    this.register(path, 'get', middleware)
  }

  post(path, middleware) {
    this.register(path, 'post', middleware)
  }

  routes() {
    return async (ctx, next) => {
      let url = ctx.url === '/index' ? '/' : ctx.url
      let method = ctx.method
      let route
      for (let i = 0; i < this.stacks.length; i++) {
        let item = this.stacks[i]
        if (item.path === url && item.method === method) {
          route = item.middleware
          break
        }
      }

      if (typeof route === 'function') {
        await route(ctx, next)
        return
      }

      await next()
    }
  }
}

module.exports = Router

啟動伺服器後，測試下 loacalhost:3000, 返回頁面上 index page 表示路由實現成功！

本文原始碼地址： https://github.com/marklin2012/moa/

歡迎關注凹凸實驗室部落格：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：

歡迎關注凹凸實驗室公眾號

新一代web框架Koa原始碼學習
2018-11-02
Web框架原始碼
Koa2 原始碼學習(下)
2019-01-23
原始碼
Koa2 原始碼學習(上)
2018-04-25
原始碼
Koa原始碼解析，帶你實現一個迷你版的Koa
2020-06-09
原始碼
通過一個實際的例子學習 combineLatest
2022-02-15
舉個例子來理解一下Koa的洋蔥模型
2020-09-26
模型
Koa2第一篇: 圖解Hello World學習原始碼
2019-01-03
圖解原始碼
【koa】koa-bodyparser原始碼
2022-07-02
原始碼
koa2原始碼解讀及實現一個簡單的koa2框架
2019-03-23
原始碼框架
通過一個例子學習Kubernetes裡的PersistentVolumeClaim的用法
2018-11-27
AI
教你從寫一個迷你koa-router到閱讀koa-router原始碼
2019-03-22
原始碼
一個具體的例子學習Java volatile關鍵字
2018-10-22
Java
Mybatis學習筆記 1：一個Mybatis使用例子
2019-02-13
MyBatis筆記
koa原始碼中的promise
2018-11-12
原始碼Promise
一探 koa-session 原始碼
2019-10-10
Session原始碼
Koa 原始碼解析
2018-10-18
原始碼
Koa原始碼解析
2019-02-16
原始碼
學習RadonDB原始碼（一）
2019-05-15
原始碼
Vue 原始碼學習（一)
2019-03-03
Vue原始碼
學習Koa
2018-04-05
koa原始碼閱讀[1]-koa與koa-compose
2018-07-30
原始碼
[AI開發]一個例子說明機器學習和深度學習的關係
2020-04-02
AI機器學習深度學習
【菜鳥讀原始碼】halo✍原始碼學習 (一)
2019-09-05
原始碼
Go Gin原始碼學習(一)
2019-05-08
Go原始碼
koa原始碼總結
2018-11-13
原始碼
Koa 原始碼淺析
2018-09-16
原始碼
koa原始碼閱讀[2]-koa-router
2018-08-09
原始碼
koa2中介軟體koa和koa-compose原始碼分析原理(一)
2019-01-01
原始碼
Koa框架學習
2020-12-28
框架
elementui原始碼學習之仿寫一個el-button
2022-12-28
UI原始碼
Vuex原始碼學習（一）功能梳理
2019-03-21
Vue原始碼
jQuery原始碼學習筆記一
2018-10-30
jQuery原始碼筆記
Moment.js學習（一）原始碼
2018-10-26
JS原始碼
Angular 原理圖 Schematics 學習 - 動手開發一個實際的例子
2021-10-18
Angular
Spring入門學習手冊 5：Spring MVC的一個Hello world！例子
2019-01-31
SpringMVC
分享一個自己閱讀 Laravel 原始碼寫的一個簡易框架,可用於學習
2019-10-13
Laravel原始碼框架
手寫@koa/router原始碼
2020-11-16
原始碼
node koa原始碼解釋
2020-12-20
原始碼