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

前言

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

老實說，還沒看express.js原始碼之前，一直覺得express.js還是很不錯的，無論從api設計，還是使用上都是可以的。但是這次閱讀完express程式碼之後，我可能改變想法了。

雖然express.js有著精妙的中介軟體設計，但是以當前js標準來說，這種精妙的設計在現在可以說是太複雜。裡面的層層回撥和遞迴，不花一定的時間還真的很難讀懂。而koa2的程式碼呢？簡直可以用四個字評論：精簡彪悍！僅僅幾個檔案，用上最新的js標準，就很好實現了中介軟體，程式碼讀起來一目瞭然。

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

1、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，那麼用法是這樣的：

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.js

於是二者的使用區別通過表格展示如下：

	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語法都是用的新標準。在掛載路由中介軟體上也有一定的差異性，這是因為二者內部實現機制的不同。其他都是大同小異的了。

那麼接下去，我們的重點便是放在二者的中介軟體的實現上。

2、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.1、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.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中做手腳。我們分兩種情況掛載中介軟體：

1. 使用app.use、router.use來掛載的
   • app.use經過一系列處理之後最終也是呼叫router.use的
2. 使用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.1、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.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.3、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，這個就不需要費那麼大篇幅去講，因為實在是太太容易理解了。

3、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)
      }
    }
  }
}
複製程式碼

每個中介軟體呼叫的next()其實就是這個：

dispatch.bind(null, i + 1)
複製程式碼

還是利用閉包和遞迴的性質，一個個執行，並且每次執行都是返回promise，所以最後得到的列印結果也是如我們所願。那麼路由的中介軟體是否呼叫就不是koa2管的，這個工作就交給了koa-router，這樣koa2才可以保持精簡彪悍的風格。

再貼出koa中介軟體的執行流程吧：

最後

有了這篇文章，相信你再也不怕面試官問你express和koa的區別了~

參考

1. koa
2. express
3. http