一個學習 Koa 源碼的例子

時間  2020-05-21
標籤 一個 學習 koa 源碼 例子 简体版
原文   原文鏈接

做者： MarkLinnode

學習目標：git

  1. 原生 node 封裝
  2. 中間件
  3. 路由

Koa 原理

一個 nodejs 的入門級 http 服務代碼以下，github

// 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() 兩個方法bash

// 建立 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 文件，app

// 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() 方法中適當的地方掛載上：koa

// 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 個同步函數:async

// 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），不定時推送文章：

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程