全棧項目|小書架|服務器開發-Koa2中間件機制洋蔥模型瞭解一下

KOA2

是什麼?

Koa是一個新的 web 框架,由 Express 幕後的原班人馬打造, 致力於成爲 web 應用和 API 開發領域中的一個更小、更富有表現力、更健壯的基石。 經過利用 async函數,Koa幫你丟棄回調函數,並有力地加強錯誤處理。 Koa 並無捆綁任何中間件, 而是提供了一套優雅的方法,幫助您快速而愉快地編寫服務端應用程序。css

爲何產生?

筆者對這幾個框架都不熟,這裏就不誤人子弟了。能夠看看下面一些大佬的介紹。html

Koa是由Express的原班人馬打造,那麼他們爲何不將Express升級版本呢而是重新開發新的一個項目?看官方的介紹:Koa 與 Expressnode

中間件

中間件(英語:Middleware),又譯中間件、中介層,是提供系統軟件和應用軟件之間鏈接的軟件,以便於軟件各部件之間的溝通,特別是應用軟件對於系統軟件的集中的邏輯,在現代信息技術應用框架如Web服務、面向服務的體系結構等中應用比較普遍。中間件-維基百科git

中間件只是一種服務,沒有這種服務系統也可以存在。好比:一臺臺式機,是由不少個部件組裝而成。鼠標、鍵盤等只是爲了讓系統更加完善。即便沒有鼠標或者鍵盤,臺式機也可使用其餘硬件軟件來操做電腦。或者查看 AOP 面向切面編程 中的比喻。github

很是有用的Koa中間件合集web

Koa是一箇中間件框架,能夠採用兩種不一樣的方法來實現中間件:express

  • async function
  • common function

如下是使用兩種不一樣方法實現一個日誌中間件的示例:編程

中間件一般帶有兩個參數(ctx, next), ctx是一個請求的上下文(context), next是調用執行下游中間件的函數. 在代碼執行完成後經過 then 方法返回一個 Promise。關於Promise介紹能夠查看這篇文章: Promise原理講解 && 實現一個Promise對象 (遵循Promise/A+規範)設計模式

async functions (node v7.6+)瀏覽器

app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});
複製代碼

Common function

app.use((ctx, next) => {
  const start = Date.now();
  return next().then(() => {
    const ms = Date.now() - start;
    console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
  });
});
複製代碼

Koa 的中間件機制使用的是洋蔥模型,而什麼是洋蔥模型呢?

洋蔥模型

經過 next() 把多箇中間件串聯執行的效果。全部的中間件都會執行兩邊,就像洋蔥同樣,從洋蔥的一側進入就會從另外一側出去。

洋蔥圈模型圖示1來源

洋蔥模型圖示1
就是從請求到響應的過程全部的中間件都會走兩遍。看不太清楚的能夠看圖示2。 洋蔥圈模型圖示2 來源
洋蔥模型圖示2
經過圖示可能還不是很清楚 Koa洋蔥模型的執行過程,下面來看一個 簡單例子:

const Koa = require('koa');

const app = new Koa();

// 中間件1
app.use(async (ctx, next)=>{
    console.log(1)
    next()
    console.log(11)
});
// 中間件2
app.use(async (ctx, next) => {
    console.log(2)
    next()
    console.log(22)
})

// 中間件3
app.use(async (ctx, next) => {
    console.log(3)
    next()
    console.log(33)
})

app.listen('3000');
console.log(`http://localhost:3000`);
複製代碼

在瀏覽器輸入http://localhost:3000回車以後的輸出結果:

http://localhost:3000
1
2 
3 
33
22
11

複製代碼

經過結果能夠看出執行過程和洋蔥模型是一致的。

參考


諮詢請加微信:輕撩便可。

在這裏插入圖片描述
相關文章
相關標籤/搜索