前言

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

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

雖然express.js有著精妙的中間件設計，但是以當前js標準來說，這種精妙的設計在現(xiàn)在可以說是太復雜。里面的層層回調和遞歸，不花一定的時間還真的很難讀懂。而koa2的代碼呢？簡直可以用四個字評論：精簡彪悍！僅僅幾個文件，用上最新的js標準，就很好實現(xiàn)了中間件，代碼讀起來一目了然。

老規(guī)矩，讀懂這篇文章，我們依然有一個簡單的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

于是二者的使用區(qū)別通過表格展示如下(知乎不支持markdown也是醉了~表格只能截圖了~)：

上表展示了二者的使用區(qū)別，從初始化就看出koa語法都是用的新標準。在掛載路由中間件上也有一定的差異性，這是因為二者內部實現(xiàn)機制的不同。其他都是大同小異的了。

那么接下去，我們的重點便是放在二者的中間件的實現(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() - startTimeconsole.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的中間件實現(xiàn)有一定的了解。

我們先看看第一節(jié)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打印的結果就不符合期望了呢？二者唯一的區(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

那么是什么導致這樣的結果呢？我們在接下去的分析中可以得到答案。

2.1、express掛載中間件的方式

要理解其實現(xiàn)，我們得先知道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，這幾個實例之間的關系決定了中間件初始化后形成一個數(shù)據模型，畫了下面一張圖片來展示：

圖中存在兩塊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.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 middlewaredebug('use %o %s', path, fn.name || '<anonymous>')var layer = new Layer(path, {sensitive: this.caseSensitive,strict: false,end: false}, fn);// 注意這個route字段設置為undefinedlayer.route = undefined;this.stack.push(layer); }

此時生成的Layer實例對應的便是初始化模型圖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'))); // 最終調用的就是router.use方法this._router.use(middleware.init(this)); // 最終調用的就是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]經過一系列處理之后最終也是調用router.route的，所以我們在demo中的express.js，使用了兩次app.get，其最后調用了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實例為什么分兩種? 因為調用方式的不同決定了Layer實例的不同，第二種Layer實例是掛載在route實例之下的。
• 初始化模型圖Layer實例中route字段什么時候會存在？使用router.route的時候就會存在
• 初始化實例圖中圈2和圈3的route字段不一樣，而且name也不一樣，為什么？圈2的Layer因為我們使用箭頭函數(shù)，不存在函數(shù)名，所以name是anonymous，但是圈3因為使用的router.route，所以其統(tǒng)一的回調函數(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 ' + typethrow 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統(tǒng)一為/。這樣就輕松回答了最后一個問題了。

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

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

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

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

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

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

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

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

接下去，我們分析牛逼的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 = -1return dispatch(0)function dispatch (i) {if (i <= index) return Promise.reject(new Error('next() called multiple times'))index = ilet fn = middleware[i]if (i === middleware.length) fn = nextif (!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)

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

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

最后

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

參考

koa

express

http

總結

以上是生活随笔為你收集整理的nodejs express use 传值_再也不怕面试官问你express和koa的区别了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。