中間件執(zhí)行模塊koa-Compose源碼分析

imtianx 發(fā)布于2019-08-22 14:57 / 2353人閱讀

摘要：原文博客地址，歡迎學(xué)習(xí)交流點擊預(yù)覽讀了下的源碼，寫的相當(dāng)?shù)木啠龅教幚碇虚g件執(zhí)行的模塊決定學(xué)習(xí)一下這個模塊的源碼。當(dāng)在下游沒有更多的中間件執(zhí)行后，堆棧將展開并且每個中間件恢復(fù)執(zhí)行其上游行為。

原文博客地址，歡迎學(xué)習(xí)交流：點擊預(yù)覽

讀了下Koa的源碼，寫的相當(dāng)?shù)木啠龅教幚碇虚g件執(zhí)行的模塊koa-Compose,決定學(xué)習(xí)一下這個模塊的源碼。

閱讀本文可以學(xué)到：

Koa中間件的加載

next參數(shù)的來源

中間件控制權(quán)執(zhí)行順序

先上一段使用Koa啟動服務(wù)的代碼：
放在文件app.js中

const koa = require("koa");  // require引入koa模塊
const app = new koa();    // 創(chuàng)建對象
app.use(async (ctx,next) => {
    console.log("第一個中間件")
    next();
})
app.use(async (ctx,next) => {
    console.log("第二個中間件")
    next();
})

app.use((ctx,next) => {
    console.log("第三個中間件")
    next();
})

app.use(ctx => {
    console.log("準(zhǔn)備響應(yīng)");
    ctx.body = "hello"
})

app.listen(3000)

以上代碼，可以使用node app.js啟動，啟動后可以在瀏覽器中訪問http://localhost:3000/
訪問后，會在啟動的命令窗口中打印出如下值：

第一個中間件
第二個中間件
第三個中間件
準(zhǔn)備響應(yīng)

代碼說明：

app.use()方法,用來將中間件添加到隊列中

中間件就是傳給app.use()作為的參數(shù)的函數(shù)

使用app.use()將函數(shù)添加至隊列之中后，當(dāng)有請求時，會依次觸發(fā)隊列中的函數(shù)，也就是依次執(zhí)行一個個中間件函數(shù),執(zhí)行順序按照調(diào)用app.use()添加的順序。

在每個中間件函數(shù)中，會執(zhí)行next()函數(shù)，意思是把控制權(quán)交到下一個中間件（實際上是調(diào)用next函數(shù)后，會調(diào)用下一個中間件函數(shù)，后面解析源碼會有說明），如果不調(diào)用next()函數(shù)，不能調(diào)用下一個中間件函數(shù)，那么隊列執(zhí)行也就終止了，在上面的代碼中表現(xiàn)就是不能響應(yīng)客戶端的請求了。

app.use(async (ctx,next) => {
    console.log("第二個中間件")
    // next(); 注釋之后，下一個中間件函數(shù)就不會執(zhí)行
})

內(nèi)部過程分析

內(nèi)部利用app.use()添加到一個數(shù)組隊列中：

// app.use()函數(shù)內(nèi)部添加
this.middleware.push(fn);
// 最終this.middleware為：
this.middleware = [fn,fn,fn...]

具體參考這里Koa的源碼use函數(shù)：https://github.com/koajs/koa/blob/master/lib/application.js#L104

使用koa-compose模塊的compose方法，把這個中間件數(shù)組合并成一個大的中間件函數(shù)

const fn = compose(this.middleware);

具體參考這里Koa的源碼https://github.com/koajs/koa/blob/master/lib/application.js#L126

在有請求后后會執(zhí)行這個中間件函數(shù)fn，進而會把所有的中間件函數(shù)依次執(zhí)行

這樣片面的描述可能會不知所云，可以跳過不看，只是讓諸位知道Koa執(zhí)行中間件的過程
本篇主要是分析koa-compose的源碼，之后分析整個Koa的源碼后會做詳細(xì)說明

所以最主要的還是使用koa-compose模塊來控制中間件的執(zhí)行，那么來一探究竟這個模塊如何進行工作的

koa-compose

koa-compose模塊可以將多個中間件函數(shù)合并成一個大的中間件函數(shù)，然后調(diào)用這個中間件函數(shù)就可以依次執(zhí)行添加的中間件函數(shù)，執(zhí)行一系列的任務(wù)。

源碼地址：https://github.com/koajs/compose/blob/master/index.js

先從一段代碼開始，創(chuàng)建一個compose.js的文件，寫入如下代碼：

const compose = require("koa-compose");

function one(ctx,next){
    console.log("第一個");
    next(); // 控制權(quán)交到下一個中間件（實際上是可以執(zhí)行下一個函數(shù)），
}
function two(ctx,next){
    console.log("第二個");
    next();
}
function three(ctx,next){
    console.log("第三個");
    next();
}
// 傳入中間件函數(shù)組成的數(shù)組隊列，合并成一個中間件函數(shù)
const middlewares = compose([one, two, three]);
// 執(zhí)行中間件函數(shù),函數(shù)執(zhí)行后返回的是Promise對象
middlewares().then(function (){
    console.log("隊列執(zhí)行完畢");    
})

可以使用node compose.js運行此文件，命令行窗口打印出：

第一個
第二個
第三個
隊列執(zhí)行完畢

中間件這兒的重點，是compose函數(shù)。compose函數(shù)的源代碼雖然很簡潔，但要理解明白著實要下一番功夫。
以下為源碼分析：


"use strict"

/**
 * Expose compositor.
 */
// 暴露compose函數(shù)
module.exports = compose

/**
 * Compose `middleware` returning
 * a fully valid middleware comprised
 * of all those which are passed.
 *
 * @param {Array} middleware
 * @return {Function}
 * @api public
 */
// compose函數(shù)需要傳入一個數(shù)組隊列 [fn,fn,fn,fn]
function compose (middleware) {
  // 如果傳入的不是數(shù)組，則拋出錯誤
  if (!Array.isArray(middleware)) throw new TypeError("Middleware stack must be an array!")
  // 數(shù)組隊列中有一項不為函數(shù)，則拋出錯誤
  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
   */

   // compose函數(shù)調(diào)用后，返回的是以下這個匿名函數(shù)
   // 匿名函數(shù)接收兩個參數(shù)，第一個隨便傳入，根據(jù)使用場景決定
   // 第一次調(diào)用時候第二個參數(shù)next實際上是一個undefined，因為初次調(diào)用并不需要傳入next參數(shù)
   // 這個匿名函數(shù)返回一個promise
  return function (context, next) {
    // last called middleware #
    //初始下標(biāo)為-1
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      // 如果傳入i為負(fù)數(shù)且<=-1 返回一個Promise.reject攜帶著錯誤信息
      // 所以執(zhí)行兩次next會報出這個錯誤。將狀態(tài)rejected，就是確保在一個中間件中next只調(diào)用一次
      

      if (i <= index) return Promise.reject(new Error("next() called multiple times"))
      // 執(zhí)行一遍next之后,這個index值將改變
      index = i
      // 根據(jù)下標(biāo)取出一個中間件函數(shù)
      let fn = middleware[i]
      // next在這個內(nèi)部中是一個局部變量，值為undefined
      // 當(dāng)i已經(jīng)是數(shù)組的length了，說明中間件函數(shù)都執(zhí)行結(jié)束，執(zhí)行結(jié)束后把fn設(shè)置為undefined
      // 問題：本來middleware[i]如果i為length的話取到的值已經(jīng)是undefined了，為什么要重新給fn設(shè)置為undefined呢？
      if (i === middleware.length) fn = next

      //如果中間件遍歷到最后了。那么。此時return Promise.resolve()返回一個成功狀態(tài)的promise
      // 方面之后做調(diào)用then
      if (!fn) return Promise.resolve()

      // try catch保證錯誤在Promise的情況下能夠正常被捕獲。

      // 調(diào)用后依然返回一個成功的狀態(tài)的Promise對象
      // 用Promise包裹中間件，方便await調(diào)用
      // 調(diào)用中間件函數(shù)，傳入context（根據(jù)場景不同可以傳入不同的值，在KOa傳入的是ctx）
      // 第二個參數(shù)是一個next函數(shù)，可在中間件函數(shù)中調(diào)用這個函數(shù)
      // 調(diào)用next函數(shù)后，遞歸調(diào)用dispatch函數(shù)，目的是執(zhí)行下一個中間件函數(shù)
      // next函數(shù)在中間件函數(shù)調(diào)用后返回的是一個promise對象
      // 讀到這里不得不佩服作者的高明之處。
      try {
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

補充說明：

根據(jù)以上的源碼分析得到，在一個中間件函數(shù)中不能調(diào)用兩次next()，否則會拋出錯誤

function one(ctx,next){
    console.log("第一個");
    next();
    next();
}

拋出錯誤：

next() called multiple times

next()調(diào)用后返回的是一個Promise對象，可以調(diào)用then函數(shù)

function two(ctx,next){
    console.log("第二個");
    next().then(function(){
        console.log("第二個調(diào)用then后")
    });
}

中間件函數(shù)可以是async/await函數(shù)，在函數(shù)內(nèi)部可以寫任意的異步處理，處理得到結(jié)果后再進行下一個中間件函數(shù)。

創(chuàng)建一個文件問test-async.js,寫入以下代碼:

const compose = require("koa-compose");

// 獲取數(shù)據(jù)
const getData = () => new Promise((resolve, reject) => {
    setTimeout(() => resolve("得到數(shù)據(jù)"), 2000);
});

async function one(ctx,next){
    console.log("第一個，等待兩秒后再進行下一個中間件");
    // 模擬異步讀取數(shù)據(jù)庫數(shù)據(jù)
    await getData()  // 等到獲取數(shù)據(jù)后繼續(xù)執(zhí)行下一個中間件
    next()
}
function two(ctx,next){
    console.log("第二個");
    next()
}
function three(ctx,next){
    console.log("第三個");
    next();
}

const middlewares = compose([one, two, three]);

middlewares().then(function (){
    console.log("隊列執(zhí)行完畢");    
})

可以使用node test-async.js運行此文件，命令行窗口打印出：

第一個，等待兩秒后再進行下一個中間件
第二個
第三個
第二個調(diào)用then后
隊列執(zhí)行完畢

在以上打印輸出過程中，執(zhí)行第一個中間件后，在內(nèi)部會有一個異步操作，使用了async/await后得到同步操作一樣的體驗，這步操作可能是讀取數(shù)據(jù)庫數(shù)據(jù)或者讀取文件，讀取數(shù)據(jù)后，調(diào)用next()執(zhí)行下一個中間件。這里模擬式等待2秒后再執(zhí)行下一個中間件。

更多參考了async/await：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

執(zhí)行順序

調(diào)用next后，執(zhí)行的順序會讓人產(chǎn)生迷惑，創(chuàng)建文件為text-next.js，寫入以下代碼：

const koa = require("koa");
const app = new koa();
app.use((ctx, next) => {
  console.log("第一個中間件函數(shù)")
  next();
  console.log("第一個中間件函數(shù)next之后");
})
app.use(async (ctx, next) => {
  console.log("第二個中間件函數(shù)")
  next();
  console.log("第二個中間件函數(shù)next之后");
})
app.use(ctx => {
  console.log("響應(yīng)");
  ctx.body = "hello"
})

app.listen(3000)

以上代碼，可以使用node text-next.js啟動，啟動后可以在瀏覽器中訪問http://localhost:3000/
訪問后，會在啟動的命令窗口中打印出如下值：

第一個中間件函數(shù)
第二個中間件函數(shù)
響應(yīng)
第二個中間件函數(shù)next之后
第一個中間件函數(shù)next之后

是不是對這個順序產(chǎn)生了深深地疑問，為什么會這樣呢？

當(dāng)一個中間件調(diào)用 next() 則該函數(shù)暫停并將控制傳遞給定義的下一個中間件。當(dāng)在下游沒有更多的中間件執(zhí)行后，堆棧將展開并且每個中間件恢復(fù)執(zhí)行其上游行為。
過程是這樣的：

先執(zhí)行第一個中間件函數(shù)，打印出 "第一個中間件函數(shù)"

調(diào)用了next，不再繼續(xù)向下執(zhí)行

執(zhí)行第二個中間件函數(shù)，打印出 "第二個中間件函數(shù)"

調(diào)用了next，不再繼續(xù)向下執(zhí)行

執(zhí)行最后一個中間件函數(shù)，打印出 "響應(yīng)"

...

最后一個中間函數(shù)執(zhí)行后，上一個中間件函數(shù)收回控制權(quán)，繼續(xù)執(zhí)行，打印出 "第二個中間件函數(shù)next之后"

第二個中間件函數(shù)執(zhí)行后，上一個中間件函數(shù)收回控制權(quán)，繼續(xù)執(zhí)行，打印出 "第一個中間件函數(shù)next之后"

借用一張圖來直觀的說明：

具體看別人怎么理解next的順序：https://segmentfault.com/q/1010000011033764

最近在看Koa的源碼，以上屬于個人理解，如有偏差歡迎指正學(xué)習(xí)，謝謝。

參考資料：https://koa.bootcss.com/
https://cnodejs.org/topic/58fd8ec7523b9d0956dad945

GPU云服務(wù)器云服務(wù)器 python執(zhí)行模塊 php定時執(zhí)行源碼源碼編譯模塊 linux 模塊源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93024.html

發(fā)表評論

登陸后可評論

0條評論

imtianx

男|高級講師

我要關(guān)注我要私信

TA的文章

六一云：美國G口/香港CTG/美國T級超防云/湖北高防云服務(wù)器物理機促銷活動

閱讀 3807·2021-09-23 11:32
Quartus II 軟件和 DE2-115 開發(fā)板使用入門

閱讀 2472·2021-09-06 15:01
盤點騰訊云服務(wù)器優(yōu)惠活動及新老用戶優(yōu)惠折扣「2021.8」

閱讀 1632·2021-08-18 10:24
更懂在線互動課堂，UCloud優(yōu)刻得推出URTC實時音視頻

閱讀 3470·2019-12-27 11:44
怎樣才能在WEB前端、HTML5開發(fā)的路上，越走越遠，越笑越好？！

閱讀 3616·2019-08-30 15:52
整理1

閱讀 2524·2019-08-30 11:11
寫一個菜鳥裹裹小程序吧

閱讀 699·2019-08-29 17:27
web 移動端橫向滾動的阻尼感很強，滑動不靈敏

閱讀 610·2019-08-29 16:22

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

中間件執(zhí)行模塊koa-Compose源碼分析

相關(guān)文章

koa源碼閱讀[1]-koa與koa-compose

koa源碼閱讀之目錄結(jié)構(gòu)與輔助庫相關(guān)

Koa2源碼閱讀筆記

Koa源碼閱讀筆記(2) -- compose

**深入探析koa之中間件流程控制篇**

發(fā)表評論

0條評論

imtianx

男|高級講師

TA的文章

六一云：美國G口/香港CTG/美國T級超防云/湖北高防云服務(wù)器物理機促銷活動

Quartus II 軟件和 DE2-115 開發(fā)板使用入門

盤點騰訊云服務(wù)器優(yōu)惠活動及新老用戶優(yōu)惠折扣「2021.8」

更懂在線互動課堂，UCloud優(yōu)刻得推出URTC實時音視頻

怎樣才能在WEB前端、HTML5開發(fā)的路上，越走越遠，越笑越好？！

整理1

寫一個菜鳥裹裹小程序吧

web 移動端橫向滾動的阻尼感很強，滑動不靈敏

最新活動