快捷導(dǎo)航

深入理解 Koa 框架中間件原理

更新時(shí)間：2018年10月18日 08:40:00 作者：WEBOOK

koa是目前node里最流行的web框架。這篇文章主要介紹了理解 Koa 框架中間件原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Node 主要用在開發(fā) Web 應(yīng)用，koa 是目前 node 里最流行的 web 框架。

在 Node 開啟一個(gè) http 服務(wù)簡直易如反掌,官網(wǎng) demo。

const http = require("http");

const server = http.createServer((req, res) => {
 res.statusCode = 200;
 res.setHeader("Content-Type", "text/plain");
 res.end("Hello World\n");
});

const hostname = "127.0.0.1";
const port = 3000;
server.listen(port, hostname, () => {
 console.log(`Server running at http://${hostname}:${port}/`);
});

引入 http 模塊， http 的 createServer 方法創(chuàng)建了一個(gè) http.Server 的實(shí)例。
server 監(jiān)聽 3000 端口。
我們傳入到 createServer 里的函數(shù)實(shí)際是監(jiān)聽 request 事件的回調(diào)，每當(dāng)請求進(jìn)來，監(jiān)聽函數(shù)就會執(zhí)行。
request 事件的監(jiān)聽函數(shù)，其函數(shù)接受兩個(gè)參數(shù)，分別是 req 和 res 。其中 req 是一個(gè)可讀流， res 是一個(gè)可寫流。我們通過 req 獲取 http 請求的所有信息，同時(shí)將數(shù)據(jù)寫入到 res 來對該請求作出響應(yīng)。

koa 應(yīng)用

koa 如何創(chuàng)建一個(gè) server, 直接上個(gè)官網(wǎng)的例子

const Koa = require("koa");
const app = new Koa();

// x-response-time

app.use(async (ctx, next) => {
 const start = Date.now();
 await next();
 const ms = Date.now() - start;
 ctx.set("X-Response-Time", `${ms}ms`);
});

// logger

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

// response

app.use(async ctx => {
 ctx.body = "Hello World";
});

app.listen(3000);

中間件概念在編程中使用廣泛, 不管是前端還是后端, 在實(shí)際編程中或者框架設(shè)計(jì)都有使用到這種實(shí)用的模型。

基本上，Koa 所有的功能都是通過中間件實(shí)現(xiàn)的。

每個(gè)中間件默認(rèn)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是 Context 對象，第二個(gè)參數(shù)是 next 函數(shù)。只要調(diào)用 next 函數(shù)，就可以把執(zhí)行權(quán)轉(zhuǎn)交給下一個(gè)中間件。

如果中間件內(nèi)部沒有調(diào)用 next 函數(shù)，那么執(zhí)行權(quán)就不會傳遞下去。

多個(gè)中間件會形成一個(gè)棧結(jié)構(gòu)（middle stack），以“先進(jìn)后出”（first-in-last-out）的順序執(zhí)行。整個(gè)過程就像，先是入棧，然后出棧的操作。

上面代碼的執(zhí)行順序是：

請求 ==> x-response-time 中間件 ==> logger 中間件 ==> response中間件 ==> logger 中間件 ==> response-time 中間件 ==> 響應(yīng)

理解 Koa 的中間件機(jī)制（源碼分析）

閱讀源碼，化繁為簡,我們看看 koa 的中間件系統(tǒng)是如何實(shí)現(xiàn)的。

class Application extends Emitter {
 constructor() {
  super();
  this.middleware = [];
 },

 use(fn) {
  this.middleware.push(fn);
  return this;
 },

 callback() {
  const fn = compose(this.middleware);

  return function(req, res) {
   return fn(ctx);
  };
 },

 listen(...args) {
  const server = http.createServer(this.callback());
  return server.listen(...args);
 }
}

好了，精簡結(jié)束，一不小心，去枝末節(jié)，最后只剩下不到 20 行代碼。

這就是框架的核心，簡化后的代碼非常清晰，有點(diǎn)不可思議,但核心就是這么簡單。

我們先分析以上代碼做了什么事。

我們定義了一個(gè) middleware 數(shù)組來存儲中間件。
我們定一個(gè)了一個(gè) use 方法來注冊一個(gè)中間件。其實(shí)就是簡單的 push 到自身的 mideware 這個(gè)數(shù)組中。
我們還使用了一個(gè) compose 方法，傳入 middleware ，應(yīng)該是做了一些處理，返回了一個(gè)可執(zhí)行的方法。

你一定對中間的 compose 方法很好奇，初此之外的代碼都容易理解，唯獨(dú)這個(gè) compose 不太知道究竟做了什么。

其實(shí)， compose 就是整個(gè)中間件框架的核心。

compose 之外，代碼已經(jīng)很清楚的定義了

中間件的存儲
中間件的注冊

而 compose 方法做了最為重要的一件事

中間件的執(zhí)行

核心源碼 compose

先上碼

function compose(middleware) {
 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);
   }
  }
 };
}

我試圖去簡化一下這個(gè)方法，但方法本身已經(jīng)足夠簡潔。

代碼很簡潔。

通過 next()傳遞實(shí)現(xiàn)中間件調(diào)用, 結(jié)合 Promise 采用遞歸調(diào)用的通知機(jī)制。

看圖