前言

用了那么多年的express.js，終于有時間來深入學(xué)習(xí)express料饥，然后順便再和koa2的實現(xiàn)方式對比一下姻几。

老實說宜狐，還沒看express.js源碼之前，一直覺得express.js還是很不錯的蛇捌，無論從api設(shè)計抚恒，還是使用上都是可以的。但是這次閱讀完express代碼之后络拌，我可能改變想法了俭驮。

雖然express.js有著精妙的中間件設(shè)計，但是以當(dāng)前js標(biāo)準(zhǔn)來說，這種精妙的設(shè)計在現(xiàn)在可以說是太復(fù)雜混萝。里面的層層回調(diào)和遞歸遗遵，不花一定的時間還真的很難讀懂。而koa2的代碼呢逸嘀？簡直可以用四個字評論：精簡彪悍车要！僅僅幾個文件，用上最新的js標(biāo)準(zhǔn)崭倘，就很好實現(xiàn)了中間件翼岁，代碼讀起來一目了然。

老規(guī)矩司光，讀懂這篇文章琅坡，我們依然有一個簡單的demo來演示： express-vs-koa

1、express用法和koa用法簡單展示

如果你使用express.js啟動一個簡單的服務(wù)器残家，那么基本寫法應(yīng)該是這樣：

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啟動服務(wù)器是怎么使用的，可以參考demo中的這個文件：node.js

于是二者的使用區(qū)別通過表格展示如下：

上表展示了二者的使用區(qū)別坞淮，從初始化就看出koa語法都是用的新標(biāo)準(zhǔn)茴晋。在掛載路由中間件上也有一定的差異性，這是因為二者內(nèi)部實現(xiàn)機(jī)制的不同碾盐。其他都是大同小異的了晃跺。

那么接下去，我們的重點便是放在二者的中間件的實現(xiàn)上毫玖。

2掀虎、express.js中間件實現(xiàn)原理

我們先來看一個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中當(dāng)請求/api/test1的時候打印結(jié)果是什么呢烹玉？

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

如果你清楚這個打印結(jié)果的原因，想必對express.js的中間件實現(xiàn)有一定的了解阐滩。

我們先看看第一節(jié)demo的打印結(jié)果是：

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打印的結(jié)果就不符合期望了呢？二者唯一的區(qū)別就是第二個demo加了異步處理掂榔。有了異步處理继效，整個過程就亂掉了。因為我們期望的執(zhí)行流程是這樣的：

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

那么是什么導(dǎo)致這樣的結(jié)果呢装获？我們在接下去的分析中可以得到答案瑞信。

2.1、express掛載中間件的方式

要理解其實現(xiàn)穴豫，我們得先知道express.js到底有多少種方式可以掛載中間件進(jìn)去凡简？熟悉express.js的童鞋知道嗎逼友？知道的童鞋可以心里默默列舉一下。

目前可以掛載中間件進(jìn)去的有：(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，這幾個實例之間的關(guān)系決定了中間件初始化后形成一個數(shù)據(jù)模型浊竟，畫了下面一張圖片來展示：

image

圖中存在兩塊Layer實例怨喘，掛載的地方也不一樣，以express.js為例子振定，我們通過調(diào)試找到更加形象的例子：

image

結(jié)合二者，我們來聊聊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經(jīng)過一系列處理之后最終也是調(diào)用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]經(jīng)過一系列處理之后最終也是調(diào)用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字段設(shè)置為undefined
  layer.route = undefined;

  this.stack.push(layer);
}

此時生成的Layer實例對應(yīng)的便是初始化模型圖1指示的多個Layer實例硫眨，此時以express.js為例子，我們看初始化實例圖圈1的所有Layer實例巢块，會發(fā)現(xiàn)除了我們自定義的中間件(共5個)礁阁，還有兩個系統(tǒng)自帶的，看初始化實例圖的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'))); // 最終調(diào)用的就是router.use方法
    this._router.use(middleware.init(this)); // 最終調(diào)用的就是router.use方法
  }
};

于是回答了我們剛才的第三個問題姥闭。7個中間件，2個系統(tǒng)自帶越走、3個APP級別的中間棚品、2個路由級別的中間件

2.2.2、router.route

我們說過app.all廊敌、app.[Http Method]铜跑、app.route、router.all骡澈、router.[Http Method]經(jīng)過一系列處理之后最終也是調(diào)用router.route的锅纺，所以我們在demo中的express.js，使用了兩次app.get肋殴，其最后調(diào)用了router.route囤锉，我們看該方法核心實現(xiàn)：

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

這么簡單的實現(xiàn)，與上一個方法的實現(xiàn)唯一的區(qū)別就是多了new Route這個疼电。通過二者對比嚼锄，我們可以回答上面的好幾個問題：

• 初始化模型圖Layer實例為什么分兩種? 因為調(diào)用方式的不同決定了Layer實例的不同，第二種Layer實例是掛載在route實例之下的蔽豺。
• 初始化模型圖Layer實例中route字段什么時候會存在区丑？使用router.route的時候就會存在
• 初始化實例圖中圈2和圈3的route字段不一樣，而且name也不一樣修陡，為什么沧侥？圈2的Layer因為我們使用箭頭函數(shù)，不存在函數(shù)名魄鸦，所以name是anonymous宴杀，但是圈3因為使用的router.route，所以其統(tǒng)一的回調(diào)函數(shù)都是route.dispath拾因，因此其函數(shù)名字都統(tǒng)一是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實例，維護(hù)的是一個path跪解，對應(yīng)多個method的handle的映射炉旷。每一個method對應(yīng)的handle都是一個layer，path統(tǒng)一為/叉讥。這樣就輕松回答了最后一個問題了窘行。

至此，再回去看初始化模型圖图仓，相信大家可以有所明白了吧~

2.3罐盔、express中間件的執(zhí)行邏輯

整個中間件的執(zhí)行邏輯無論是外層Layer，還是route實例的Layer救崔，都是采用遞歸調(diào)用形式翘骂，一個非常重要的函數(shù)next()實現(xiàn)了這一切，這里做了一張流程圖帚豪，希望對你理解這個有點用處：

image

我們再把express.js的代碼使用另外一種形式實現(xiàn)，這樣你就可以完全搞懂整個流程了草丧。

為了簡化狸臣，我們把系統(tǒng)掛載的兩個默認(rèn)中間件去掉，把路由中間件去掉一個昌执，最終的效果是：

((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的任何處理烛亦，所以當(dāng)中間件存在異步函數(shù)的時候，因為整個next的設(shè)計原因懂拾，并不會等待這個異步函數(shù)resolve,于是我們就看到了sleep函數(shù)的打印被放在了最后面煤禽，并且第一個中間件想要記錄的請求時間也變得不再準(zhǔn)確了~

但是有一點需要申明的是雖然打印變得奇怪，但是絕對不會影響整個請求岖赋，因為response是在我們await之后檬果，所以請求是否結(jié)束還是取決于我們是否調(diào)用了res.send這類函數(shù)

至此，希望整個express中間件的執(zhí)行流程你可以熟悉一二唐断，更多細(xì)節(jié)建議看看源碼选脊，這種精妙的設(shè)計確實不是這篇文章能夠說清楚的。本文只是想你在面試的過程中可以做到有話要說~

接下去脸甘，我們分析牛逼的Koa2恳啥，這個就不需要費那么大篇幅去講，因為實在是太太容易理解了丹诀。

3钝的、koa2中間件

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

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

每個中間件調(diào)用的next()其實就是這個：

dispatch.bind(null, i + 1)

還是利用閉包和遞歸的性質(zhì)，一個個執(zhí)行硝桩，并且每次執(zhí)行都是返回promise沿猜，所以最后得到的打印結(jié)果也是如我們所愿。那么路由的中間件是否調(diào)用就不是koa2管的亿柑，這個工作就交給了koa-router邢疙，這樣koa2才可以保持精簡彪悍的風(fēng)格。

再貼出koa中間件的執(zhí)行流程吧：

middleware

最后

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

參考

1. koa
2. express
3. http