koa2 是由express原班人馬打造的新一代web后端框架,相比express koa2更輕,代碼也更優(yōu)雅擺脫js以前惡心的回調地獄,采用async await方式執(zhí)行異步操作。
博客地址

了解koa中間件

koa對網絡請求采用了中間件的形式處理,中間件可以介入請求和相應的處理,是一個輕量級的模塊,每個中間負責完成某個特定的功能。中間件的通過next函數聯系,執(zhí)行next()后會將控制權交給下一個中間件,如果沒有有中間件沒有執(zhí)行next后將會沿路折返,將控制權交換給前一個中間件。官方文檔將這種代碼執(zhí)行方式通過下面圖片舉例。

官方示例圖

koa2的中間件是通過async await實現,一個很簡單的中間件實現如下

async function logger(ctx, next) {
  const startDate = new Date();
  next();
  console.log(`method: ${ctx.method} code: ${ctx.status} time:${new Date() -startDate}ms`);
}

這是一個處理完一條網絡請求后會打印應對的請求方式,狀態(tài)碼,花費時間。 中間件包含兩個參數 ctx, next。

ctx作為上下文使用,包括基本的ctx.request和ctx.response另外koa通過delegates這個庫對request, response一些常用屬性或者方法,做了很多代理操作,可以直接通過ctx訪問得到,比如request.url可以寫成ctx.url。除此之外,koa還約定了一個中間件的存儲空間ctx.state通過這個state可以儲存一些的數據,比如用戶數據,另外類似koa-views這些渲染view層的中間件也會默認把ctx.state里面的屬性作為view的上下文傳入。如果使用webpack打包的話可以使用中間將加載資源的方法作為ctx.state的屬性傳入到view層使之獲取資源路徑。

另外一個參數next,上面也講過,他的作用是將處理的控制權交給下一個中間件,next()后面的代碼會在后面中間件執(zhí)行結束后執(zhí)行。

還有,因為中間件是按順序執(zhí)行,所以中間件的順序也非常重要,另外路由執(zhí)行順序也是一樣,因為都是通過中間件實現,所以路由的話應該把,容易匹配到的放在后面

比如路由規(guī)則包含了/all和/:id那么對/all處理的中間件應該放在/:id之前。

koa2的中間件實現

use

const app = new Koa();
app.use(logger)

koa實例對象app包含了一個數組屬性middleware,通過use方法,將中間件push到數組中,源碼如下

use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
    if (isGeneratorFunction(fn)) {
      deprecate('Support for generators will been removed in v3. ' +
                'See the documentation for examples of how to convert old middleware ' +
                'https://github.com/koajs/koa/tree/v2.x#old-signature-middleware-v1x');
      fn = convert(fn);
    }
    debug('use %s', fn._name || fn.name || '-');
    this.middleware.push(fn);
    return this;
  }

從源碼來看,koa2為了兼容koa1時中間件是generators函數所以使用了convert將generators包裝成一個Promise不過提示也說,v3時候將不再支持generators ,另外use返回this所以我們可以鏈式調用use函數。

callback

當執(zhí)行app.listen方法開啟服務器時,實際上是在內部,使用http模塊,啟動了http服務器,并將自身的callback函數傳入,所以來看下callback的源碼

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!')
  }
  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 //執(zhí)行后fn為undefined,所以下一步將resolve()
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

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

    if (!this.listeners('error').length) this.on('error', this.onerror);

    return (req, res) => {
      res.statusCode = 404;
      const ctx = this.createContext(req, res);
      onFinished(res, ctx.onerror);
      fn(ctx).then(() => respond(ctx)).catch(ctx.onerror);
    };
  }

實際上compose函數koa將它封裝成一個模塊,為了方便,我將它寫在一起。

const fn = compose(this.middleware);

compose的執(zhí)行流程是將中間件數組傳入,返回一個類型為(ctx, next) =>{}的函數

ctx,為網絡處理上下文,next指向下個中間件。內部通過dispatch函數形成了一條處理請求的流水線。

每當有請求時將執(zhí)行

return (req, res) => {
      res.statusCode = 404;
      const ctx = this.createContext(req, res);//對req,res,cookies封裝
      onFinished(res, ctx.onerror); //當連接結束報錯時執(zhí)行ctx.onerror
      fn(ctx).then(() => respond(ctx)).catch(ctx.onerror);
    };

首先,對狀態(tài)碼設置初始值404,并且通過createConext創(chuàng)建初始上下文。然后將上下文傳入fn

fn執(zhí)行流程為,首先會執(zhí)行第一個中間件,并把第下個中間件函數作參數next傳入,每當執(zhí)行next()將控制權交給下一個中間件,知道中間件執(zhí)行結束,交還控制權,才能繼續(xù)執(zhí)行下一部操作,執(zhí)行到最后一個中間件,因為next()為undefined,所以終止執(zhí)行,promise執(zhí)行resolve

fn函數執(zhí)行結束表示著,該請求已經處理好,只剩下發(fā)送給客戶端了,所以接下來,將把處理好的上下文ctx傳入respond執(zhí)行最后的操作

respond包含了對許多response的狀態(tài)碼,和body類型的判斷來決定返回給客戶端什么數據。

end