Koa源碼分析

Render 發(fā)布于2019-08-22 13:55 / 606人閱讀

摘要：上篇文章寫了如何閱讀的源碼粗略的過了一下的源碼但是作為一個沒有得出一個具體的結(jié)論中間件的運行原理也不清楚這里我們再仔細的過一遍的源碼跟著例子過一遍首先還是先過一遍例子起一個服務(wù)來一個作為模塊的再封裝我們還是慢慢來挖掘它是如何封裝的吧無關(guān)的代

上篇文章寫了如何閱讀Koa的源碼, 粗略的過了一下Koa的源碼, 但是作為一個沒有得出一個具體的結(jié)論, 中間件的運行原理也不清楚, 這里我們再仔細的過一遍Koa的源碼.

跟著例子過一遍

首先還是先過一遍例子

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

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

app.listen(3000);

起一個web服務(wù), 來一個Hello World, 作為http模塊的再封裝, 我們還是慢慢來挖掘它是如何封裝的吧(無關(guān)的代碼我都會刪掉).

首先是listen:

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

http模塊我們都知道無非是http.createServer(fn).listen(port), 其中fn帶著req, res. 根據(jù)上面的封裝我們可以肯定this.callback肯定是帶著請求以及進行響應(yīng)了. 那么再來看看this.callback吧.

  callback() {
    const fn = compose(this.middleware);
    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res);
      return this.handleRequest(ctx, fn);
    };

    return handleRequest;
  }

果然callback返回的函數(shù)是帶著req, res的, 那我繼續(xù)往下走看handleRequest究竟經(jīng)歷了什么, ctx大佬出現(xiàn)了, 我們在用koa的時候所有請求響應(yīng)都是掛在ctx上的, 看起來ctx是通過createContext創(chuàng)建的, 那就繼續(xù)看createContext吧:

  createContext(req, res) {
    const context = Object.create(this.context);
    const request = context.request = Object.create(this.request);
    const response = context.response = Object.create(this.response);
    context.app = request.app = response.app = this;
    context.req = request.req = response.req = req;
    context.res = request.res = response.res = res;
    request.ctx = response.ctx = context;
    request.response = response;
    response.request = request;
    context.originalUrl = request.originalUrl = req.url;
    context.cookies = new Cookies(req, res, {
      keys: this.keys,
      secure: request.secure
    });
    request.ip = request.ips[0] || req.socket.remoteAddress || "";
    context.accept = request.accept = accepts(req);
    context.state = {};
    return context;
  }

createContext比較簡單, 就是把各種有用的沒用的變量掛到context上, 代碼也很簡單, 但是因為涉及到request和response我們需要簡單看一下request.js和response.js:

module.exports = {
  get header() {
    return this.req.headers;
  },
//..more items
}

都是很簡單獲取變量沒啥好說的, 那么回到前面callback部分, ctx創(chuàng)建好了然后調(diào)用并返回了this.handleReques, 沒啥好說的, 繼續(xù)看唄:

  handleRequest(ctx, fnMiddleware) {
    const res = ctx.res;
    res.statusCode = 404;
    const onerror = err => ctx.onerror(err);
    const handleResponse = () => respond(ctx);
    onFinished(res, onerror);
    return fnMiddleware(ctx).then(handleResponse).catch(onerror);
  }

這一部分略微復雜一點, 由上面看出來fnMiddleware 是我們?nèi)〕鰜淼闹虚g件, 然后我們把ctx傳到中間件里執(zhí)行, 跟我們的通常用法有點像了. 到這一步重點來了: 中間件

中間件

在探究中間件的原理之前, 不妨先來看看中間件是怎么用的, 來個簡單的例子:

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

app.use(async function m1 (ctx, nex) {
   console.log("m1")
   await next()
   console.log("m2 end")
})

app.use(async function m2 (ctx, nex) {
  console.log("m2")
  await next()
  console.log("m2 end")
})

app.use(async function m3 (ctx, nex) {
  console.log("m3")
  ctx.body = "Hello World"
})

上面的結(jié)果很明確了, 但是我們不妨來可視化一下:
m1: 輸出m1
await1: m1你先暫停一下讓m2先走
m1: ...
m2: 輸出m2
await2: m2你也停一下讓m3先走
m2: ...(委屈)
m3: 輸出m3, 上面的注意啦要遠路返回了
m2: 輸出m2 end m1注意了我要返回啦
m1: 輸出m1 end

respond: ctx.body是Hello world呢就糊弄一下用戶返回吧

看到?jīng)], ctx.body不代表立即響應(yīng), 僅僅是一個我們后面會用到的變量, 也就是說我們的ctx過了一遍所有的中間件然后才會做出響應(yīng). 這里不提await神奇的暫停效果, 我們就需要可以這么用就行了. 那么我們這個中間件是怎么實現(xiàn)的呢, 來看compose.js:

function compose (middleware) {

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      index = i
      let fn = middleware[i]
      if (!fn) return Promise.resolve()
      return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
    }
  }
}

看過我前一篇的可以知道這里其實就是一個遞歸. 但是跟connect的遞歸不一樣這里是Promise, 我們都知道await 跟Promise搭配味道更佳嘛. 重點是這個next, 我們調(diào)用了await next之后, 程序非得等這個Promise執(zhí)行完不可, 我們來簡化一下中間件的模型:

Promise.resolve(async m1 () {
  console.log(m1)
  await Promise.resolve(async m2 () {
    console.log(m2)
    await Promise.resolve(async m3 () {
      console.log(m3)
      ctx.body = "xxx"
     })
     console.log(m2 end)
  })
  console.log(m1 end)
})

是不是這樣一下就清楚了, 作為應(yīng)用層的東西, 我們不需要去考慮async/await究竟是怎么實現(xiàn)的, 只需要了解它實現(xiàn)了什么樣的效果.

還是得佩服tj大神. 有問題可以互相交流哈.

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

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

發(fā)表評論

登陸后可評論

0條評論

Render

男|高級講師

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

TA的文章

力扣周結(jié)03

閱讀 1107·2021-11-23 09:51
CloudCone：黑色星期五預售促銷，洛杉磯MC機房大硬盤KVM VPS年付$14.2起

閱讀 1074·2021-10-18 13:31
認證常用主機什么意思-ps4怎么認證為常用主機？

閱讀 2967·2021-09-22 16:06
微軟全新Windows Server 2022正式發(fā)布，附鏡像免費下載地址

閱讀 4256·2021-09-10 11:19
10.24開發(fā)者狂歡節(jié)，這里有一波福（現(xiàn)）利（金）送（紅）你（包）

閱讀 2196·2019-08-29 17:04
$q 實例分析 Angular 中的 Promise

閱讀 425·2019-08-29 10:55
UCloud管理外網(wǎng)彈性IP

閱讀 2472·2019-08-26 16:37
一篇文章讓你學會如何選擇 JS HTTP 請求庫

閱讀 3369·2019-08-26 13:29

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

資訊專欄INFORMATION COLUMN

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

Koa源碼分析

相關(guān)文章

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

Koa源碼閱讀筆記(4) -- ctx對象

koa2 一網(wǎng)打盡（基本使用，洋蔥圈，中間件機制和模擬，源碼分析(工程，核心模塊，特殊處理)，核心點

koa2源碼分析