不再怕面試官問你express和koa的區別了

時間 2019-11-06

原文原文鏈接

前言

用了那麼多年的express.js，終於有時間來深刻學習express，而後順便再和koa2的實現方式對比一下。html

老實說，還沒看express.js源碼以前，一直以爲express.js仍是很不錯的，不管從api設計，仍是使用上都是能夠的。可是此次閱讀完express代碼以後，我可能改變想法了。node

雖然express.js有着精妙的中間件設計，可是以當前js標準來講，這種精妙的設計在如今能夠說是太複雜。裏面的層層回調和遞歸，不花必定的時間還真的很難讀懂。而koa2的代碼呢？簡直能夠用四個字評論：精簡彪悍！僅僅幾個文件，用上最新的js標準，就很好實現了中間件，代碼讀起來一目瞭然。git

老規矩，讀懂這篇文章，咱們依然有一個簡單的demo來演示： express-vs-koagithub

一、express用法和koa用法簡單展現

若是你使用express.js啓動一個簡單的服務器，那麼基本寫法應該是這樣：面試

const express = require('express')

const app = express()
const router = express.Router()

app.use(async (req, res, next) => {
  console.log('I am the first middleware')
  next()
  console.log('first middleware end calling')
})
app.use((req, res, next) => {
  console.log('I am the second middleware')
  next()
  console.log('second middleware end calling')
})

router.get('/api/test1', async(req, res, next) => {
  console.log('I am the router middleware => /api/test1')
  res.status(200).send('hello')
})

router.get('/api/testerror', (req, res, next) => {
  console.log('I am the router middleware => /api/testerror')
  throw new Error('I am error.')
})

app.use('/', router)

app.use(async(err, req, res, next) => {
  if (err) {
    console.log('last middleware catch error', err)
    res.status(500).send('server Error')
    return
  }
  console.log('I am the last middleware')
  next()
  console.log('last middleware end calling')
})

app.listen(3000)
console.log('server listening at port 3000')
複製代碼

換算成等價的koa2，那麼用法是這樣的：express

const koa = require('koa')
const Router = require('koa-router')

const app = new koa()
const router = Router()

app.use(async(ctx, next) => {
  console.log('I am the first middleware')
  await next()
  console.log('first middleware end calling')
})

app.use(async (ctx, next) => {
  console.log('I am the second middleware')
  await next()
  console.log('second middleware end calling')
})

router.get('/api/test1', async(ctx, next) => {
  console.log('I am the router middleware => /api/test1')
  ctx.body = 'hello'
})

router.get('/api/testerror', async(ctx, next) => {
  throw new Error('I am error.')
})

app.use(router.routes())

app.listen(3000)
console.log('server listening at port 3000')

複製代碼

若是你還感興趣原生nodejs啓動服務器是怎麼使用的，能夠參考demo中的這個文件：node.jsapi

因而兩者的使用區別經過表格展現以下：promise

	koa(Router = require('koa-router'))	express(假設不使用app.get之類的方法)
初始化	const app = new koa()	const app = express()
實例化路由	const router = Router()	const router = express.Router()
app級別的中間件	app.use	app.use
路由級別的中間件	router.get	router.get
路由中間件掛載	app.use(router.routes())	app.use('/', router)
監聽端口	app.listen(3000)	app.listen(3000)

上表展現了兩者的使用區別，從初始化就看出koa語法都是用的新標準。在掛載路由中間件上也有必定的差別性，這是由於兩者內部實現機制的不一樣。其餘都是大同小異的了。bash

那麼接下去，咱們的重點即是放在兩者的中間件的實現上。服務器

二、express.js中間件實現原理

咱們先來看一個demo，展現了express.js的中間件在處理某些問題上的弱勢。demo代碼以下：

const express = require('express')

const app = express()

const sleep = (mseconds) => new Promise((resolve) => setTimeout(() => {
  console.log('sleep timeout...')
  resolve()
}, mseconds))

app.use(async (req, res, next) => {
  console.log('I am the first middleware')
  const startTime = Date.now()
  console.log(`================ start ${req.method} ${req.url}`, { query: req.query, body: req.body });
  next()
  const cost = Date.now() - startTime
  console.log(`================ end ${req.method} ${req.url} ${res.statusCode} - ${cost} ms`)
})
app.use((req, res, next) => {
  console.log('I am the second middleware')
  next()
  console.log('second middleware end calling')
})

app.get('/api/test1', async(req, res, next) => {
  console.log('I am the router middleware => /api/test1')
  await sleep(2000)
  res.status(200).send('hello')
})

app.use(async(err, req, res, next) => {
  if (err) {
    console.log('last middleware catch error', err)
    res.status(500).send('server Error')
    return
  }
  console.log('I am the last middleware')
  await sleep(2000)
  next()
  console.log('last middleware end calling')
})

app.listen(3000)
console.log('server listening at port 3000')

複製代碼

該demo中當請求/api/test1的時候打印結果是什麼呢？

I am the first middleware
================ start GET /api/test1
I am the second middleware
I am the router middleware => /api/test1
second middleware end calling
================ end GET /api/test1 200 - 3 ms
sleep timeout...
複製代碼

若是你清楚這個打印結果的緣由，想必對express.js的中間件實現有必定的瞭解。

咱們先看看第一節demo的打印結果是：

I am the first middleware
I am the second middleware
I am the router middleware => /api/test1
second middleware end calling
first middleware end calling
複製代碼

這個打印符合你們的指望，可是爲何剛纔的demo打印的結果就不符合指望了呢？兩者惟一的區別就是第二個demo加了異步處理。有了異步處理，整個過程就亂掉了。由於咱們指望的執行流程是這樣的：

I am the first middleware
================ start GET /api/test1
I am the second middleware
I am the router middleware => /api/test1
sleep timeout...
second middleware end calling
================ end GET /api/test1 200 - 3 ms
複製代碼

那麼是什麼致使這樣的結果呢？咱們在接下去的分析中能夠獲得答案。

2.一、express掛載中間件的方式

要理解其實現，咱們得先知道express.js到底有多少種方式能夠掛載中間件進去？熟悉express.js的童鞋知道嗎？知道的童鞋能夠內心默默列舉一下。

目前能夠掛載中間件進去的有：(HTTP Method指代那些http請求方法，諸如Get/Post/Put等等)

app.use
app.[HTTP Method]
app.all
app.param
router.all
router.use
router.param
router.[HTTP Method]

2.二、express中間件初始化

express代碼中依賴於幾個變量(實例)：app、router、layer、route，這幾個實例之間的關係決定了中間件初始化後造成一個數據模型，畫了下面一張圖片來展現：

圖中存在兩塊Layer實例，掛載的地方也不同，以express.js爲例子，咱們經過調試找到更加形象的例子：

結合兩者，咱們來聊聊express中間件初始化。爲了方便，咱們把上圖1叫作初始化模型圖，上圖2叫作初始化實例圖

看上面兩張圖，咱們拋出下面幾個問題，搞懂問題即是搞懂了初始化。

初始化模型圖Layer實例爲何分兩種？
初始化模型圖Layer實例中route字段何時會存在？
初始化實例圖中掛載的中間件爲何有7個？
初始化實例圖中圈2和圈3的route字段不同，並且name也不同，爲何？
初始化實例圖中的圈4裏也有Layer實例，這個時候的Layer實例和上面的Layer實例不同嗎？

首先咱們先輸出這樣的一個概念：Layer實例是path和handle互相映射的實體，每個Layer即是一箇中間件。

這樣的話，咱們的中間件中就有可能嵌套中間件，那麼對待這種情形，express就在Layer中作手腳。咱們分兩種狀況掛載中間件：

使用app.use、router.use來掛載的
- app.use通過一系列處理以後最終也是調用router.use的
使用app.all、app.[Http Method]、app.route、router.all、router.[Http Method]、router.route來掛載的
- app.all、app.[Http Method]、app.route、router.all、router.[Http Method]通過一系列處理以後最終也是調用router.route的

所以咱們把焦點聚焦在router.use和router.route這兩個方法。

2.2.一、router.use

該方法的最核心一段代碼是：

for (var i = 0; i < callbacks.length; i++) {
  var fn = callbacks[i];

  if (typeof fn !== 'function') {
    throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))
  }

  // add the middleware
  debug('use %o %s', path, fn.name || '<anonymous>')

  var layer = new Layer(path, {
    sensitive: this.caseSensitive,
    strict: false,
    end: false
  }, fn);

  // 注意這個route字段設置爲undefined
  layer.route = undefined;

  this.stack.push(layer);
}
複製代碼

此時生成的Layer實例對應的即是初始化模型圖1指示的多個Layer實例，此時以express.js爲例子，咱們看初始化實例圖圈1的全部Layer實例，會發現除了咱們自定義的中間件(共5個)，還有兩個系統自帶的，看初始化實例圖的Layer的名字分別是：query和expressInit。兩者的初始化是在[application.js]中的lazyrouter方法：

app.lazyrouter = function lazyrouter() {
  if (!this._router) {
    this._router = new Router({
      caseSensitive: this.enabled('case sensitive routing'),
      strict: this.enabled('strict routing')
    });

    this._router.use(query(this.get('query parser fn'))); // 最終調用的就是router.use方法
    this._router.use(middleware.init(this)); // 最終調用的就是router.use方法
  }
};
複製代碼

因而回答了咱們剛纔的第三個問題。7箇中間件，2個系統自帶、3個APP級別的中間、2個路由級別的中間件

2.2.二、router.route

咱們說過app.all、app.[Http Method]、app.route、router.all、router.[Http Method]通過一系列處理以後最終也是調用router.route的，因此咱們在demo中的express.js，使用了兩次app.get，其最後調用了router.route，咱們看該方法核心實現：

proto.route = function route(path) {
  var route = new Route(path);

  var layer = new Layer(path, {
    sensitive: this.caseSensitive,
    strict: this.strict,
    end: true
  }, route.dispatch.bind(route));

  layer.route = route;

  this.stack.push(layer);
  return route;
};
複製代碼

這麼簡單的實現，與上一個方法的實現惟一的區別就是多了new Route這個。經過兩者對比，咱們能夠回答上面的好幾個問題：

初始化模型圖Layer實例爲何分兩種? 由於調用方式的不一樣決定了Layer實例的不一樣，第二種Layer實例是掛載在route實例之下的。
初始化模型圖Layer實例中route字段何時會存在？使用router.route的時候就會存在
初始化實例圖中圈2和圈3的route字段不同，並且name也不同，爲何？圈2的Layer由於咱們使用箭頭函數，不存在函數名，因此name是anonymous，可是圈3由於使用的router.route，因此其統一的回調函數都是route.dispath，所以其函數名字都統一是bound dispatch，同時兩者的route字段是否賦值也一目瞭然

最後一個問題，既然實例化route以後，route有了本身的Layer，那麼它的初始化又是在哪裏的？初始化核心代碼：

// router/route.js/Route.prototype[method]
for (var i = 0; i < handles.length; i++) {
    var handle = handles[i];

    if (typeof handle !== 'function') {
      var type = toString.call(handle);
      var msg = 'Route.' + method + '() requires a callback function but got a ' + type
      throw new Error(msg);
    }

    debug('%s %o', method, this.path)

    var layer = Layer('/', {}, handle);
    layer.method = method;

    this.methods[method] = true;
    this.stack.push(layer);
  }
複製代碼

能夠看到新建的route實例，維護的是一個path，對應多個method的handle的映射。每個method對應的handle都是一個layer，path統一爲/。這樣就輕鬆回答了最後一個問題了。

至此，再回去看初始化模型圖，相信你們能夠有所明白了吧~

2.三、express中間件的執行邏輯

整個中間件的執行邏輯不管是外層Layer，仍是route實例的Layer，都是採用遞歸調用形式，一個很是重要的函數next()實現了這一切，這裏作了一張流程圖，但願對你理解這個有點用處：

咱們再把express.js的代碼使用另一種形式實現，這樣你就能夠徹底搞懂整個流程了。

爲了簡化，咱們把系統掛載的兩個默認中間件去掉，把路由中間件去掉一個，最終的效果是：

((req, res) => {
  console.log('I am the first middleware');
  ((req, res) => {
    console.log('I am the second middleware');
    (async(req, res) => {
      console.log('I am the router middleware => /api/test1');
      await sleep(2000)
      res.status(200).send('hello')
    })(req, res)
    console.log('second middleware end calling');
  })(req, res)
  console.log('first middleware end calling')
})(req, res)
複製代碼

由於沒有對await或者promise的任何處理，因此當中間件存在異步函數的時候，由於整個next的設計緣由，並不會等待這個異步函數resolve,因而咱們就看到了sleep函數的打印被放在了最後面，而且第一個中間件想要記錄的請求時間也變得再也不準確了~

可是有一點須要申明的是雖然打印變得奇怪，可是絕對不會影響整個請求，由於response是在咱們await以後，因此請求是否結束仍是取決於咱們是否調用了res.send這類函數

至此，但願整個express中間件的執行流程你能夠熟悉一二，更多細節建議看看源碼，這種精妙的設計確實不是這篇文章可以說清楚的。本文只是想你在面試的過程當中能夠作到有話要說~

接下去，咱們分析牛逼的Koa2，這個就不須要費那麼大篇幅去講，由於實在是太太容易理解了。

三、koa2中間件

koa2中間件的主處理邏輯放在了koa-compose，也就是僅僅一個函數的事情：

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    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()
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}
複製代碼