koa2源碼分析

ningwang 發(fā)布于2019-08-20 15:23 / 3343人閱讀

摘要：下面基于構(gòu)造函數(shù)入口做進(jìn)一步分析。創(chuàng)建一個空數(shù)組存放放，洋蔥流程的真相下面會分析法到?jīng)Q定忽略的子域名數(shù)量，默認(rèn)為處理環(huán)境變量實(shí)例上掛載說明上面是構(gòu)造函數(shù)入口啟動入口如下借用原生，添加。

引言

最近在寫koa2相關(guān)例子,順便看了下koa2的源碼,下面是一些個人理解。

koa1核心基于generator,但是嚴(yán)重依賴co的包裝。koa2完全不需要,基于async(其實(shí)質(zhì)是generator的語法糖調(diào)用包裝),在node v7 下可直接運(yùn)行。
關(guān)于async和generator的語法,本文不做贅述。下面先創(chuàng)建一個koa實(shí)例,然后基于入口一步步分析。

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

app.use(async function (ctx, next) {
    console.log(">> one");
    await next();
    console.log("<< one");
});
app.use(ctx => {
    ctx.body="hello world gcy";
});
app.listen("3000",function () {
    console.log("listening on port 3000");
});

說明上面這段代碼似乎有些神秘,其實(shí)質(zhì)是下面http module的封裝調(diào)用。

// native code
let http=require("http");
let server=http.createServer(function (req,res) {
    res.writeHead(200,{"Content-type":"text/plain"});
    res.write("hello world gcy");
    res.end();
});
//start service listen
server.listen(8000,function () {
    console.log("listening on port 8000");
});

下面基于koa構(gòu)造函數(shù)入口做進(jìn)一步分析。

constructor() {
    super();

    this.proxy = false;
    //創(chuàng)建一個空數(shù)組存放放middleware，洋蔥流程的真相,下面會分析法到
    this.middleware = [];
    //決定忽略的子域名數(shù)量，默認(rèn)為2
    this.subdomainOffset = 2;
    //處理環(huán)境變量
    this.env = process.env.NODE_ENV || "development";
    //實(shí)例上掛載context,request,response
    this.context = Object.create(context);
    this.request = Object.create(request);
    this.response = Object.create(response);
  }

說明上面是構(gòu)造函數(shù)入口,啟動入口如下

 //借用原生http.createServer，添加app.callback。
  listen() {
    debug("listen");
    const server = http.createServer(this.callback());
    return server.listen.apply(server, arguments);
  }

說明通過上面兩個步驟一個完整的web服務(wù)器建立起來。對于監(jiān)聽接受到的請求解析處理,是通過callback函數(shù),調(diào)用一系列中間件來完成。
下面分析中間件執(zhí)行流程,我認(rèn)為koa的主要內(nèi)涵也就在這,所以做一下重點(diǎn)來論述。
首先引入經(jīng)典中間件洋蔥圖,以便理解。

結(jié)合這幅圖再看下面的代碼

////核心代碼application 126 行  const fn = compose(this.middleware);
 return function (context, next) {
    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
      //立即返回處于resolve狀態(tài)promise實(shí)例,以便后續(xù)邏輯繼續(xù)執(zhí)行
      if (!fn) return Promise.resolve()
      try {
     
        //   await next();  //當(dāng)fn里面執(zhí)行這句話時,就會執(zhí)行dispatch(i+1),導(dǎo)致洋蔥執(zhí)行過程
        //   整個過程類似堆棧執(zhí)行釋放過程中的的遞歸調(diào)用,雖然有差異,可借用類比思考其執(zhí)行順序流程
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
    // 核心代碼application 136 行 return fn(ctx)[是一個立即狀態(tài)的promise].then(handleResponse).catch(onerror);
  }
}

如果結(jié)合注釋看上述代碼過程中存在疑惑,可進(jìn)一步參考下面的進(jìn)行思考,反之忽略即可。

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


app.use(async function (ctx, next) {
    console.log(">> one");
    await next();
    console.log("<< one");
});
app.use(async function (ctx, next) {
    console.log(">> two");
    ctx.body = "two";
    await next();
    console.log("<< two");
});
app.use(async function (ctx, next) {
    console.log(">> three");
    await next();
    console.log("<< three");
});
//如果放到首部,不方便理解洋蔥執(zhí)行流程,因?yàn)闆]有調(diào)用next函數(shù)
app.use(ctx => {
    ctx.body="hello world gcy";
});
app.listen("3000",function () {
    console.log("listening on port 3000");
});

說明 koa基于中間價架構(gòu),核心簡潔,除此之外還有一些其它相對重要的方法。

application.js

use(fn) //組裝use的傳參

createContext(req, res) 創(chuàng)建初始化的上下文，將req和res掛載在context上

onerror(err) 錯誤處理,當(dāng)設(shè)定this.slient為true，不會輸出信息,在emit觸發(fā)時執(zhí)行

respond(ctx) http response簡單封裝,信息返回

context.js

delegate(proto, "request") //Request相關(guān)方法委托,從而讓context作為調(diào)用入口

onerror(err) //中間件執(zhí)行過程中異常處理邏輯

除此之外還有request和response的參數(shù)解析文件,因?yàn)檫壿嫼唵?不做敘述。
雖然核心文件不多,但是其也require了不少包,下面列舉幾個比較重的,以作為示例。

require

events application繼承自Emitter,從而可以實(shí)現(xiàn)事件的訂閱發(fā)布。

koa-compose 中間件的封裝,核心邏輯之一,上面已分析。

debug 錯誤信息格式封裝處理

statuses http狀態(tài)碼和和相應(yīng)信息對應(yīng)處理

koa-convert 把generator轉(zhuǎn)為promise

…… and so on

總結(jié)

寫這篇文章起因,是在寫case的過程中,同一解決方案下中間件選擇的糾結(jié)癥,尤其是在選擇render template過程中,為找其本質(zhì)間差異,探尋到此。
源碼分析基于koa(version 2.2.0),通讀源碼之后,可以較清晰的開發(fā)或者使用別人的中間件,
如果你有不同的理解,歡迎留言交流。

云服務(wù)器 GPU云服務(wù)器 koa2 源碼分析 nginx源碼分析 webrtc源碼分析

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82202.html

發(fā)表評論

登陸后可評論

0條評論

ningwang

男|高級講師

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

TA的文章

liteserver：荷蘭大硬盤vps;1核/1G內(nèi)存/512G HDD/1G帶寬/10T月流量,€

閱讀 1991·2021-09-26 10:19
Totyun：上新柬埔寨VPS，2核2G內(nèi)存，10Mps Premium 中國，$12/月起

閱讀 3266·2021-09-24 10:25
UCloud優(yōu)刻得海外混合云上線實(shí)現(xiàn)全球混合多云互聯(lián)

閱讀 1654·2019-12-27 11:39
原生JS實(shí)現(xiàn)滑動輪播圖

閱讀 1937·2019-08-30 15:43
為你推薦幾款開發(fā)常用的代碼編輯器

閱讀 683·2019-08-29 16:08
css 響應(yīng)式（媒介查詢）

閱讀 3515·2019-08-29 16:07
深入了解JS數(shù)組的常用方法

閱讀 915·2019-08-26 11:30
vue-router 基礎(chǔ)知識點(diǎn)

閱讀 1279·2019-08-26 10:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

koa2源碼分析

相關(guān)文章

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

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

通過實(shí)例分析javascript中的“中間件”

**react + koa2實(shí)現(xiàn)的論壇**

KOA2框架原理解析和實(shí)現(xiàn)

發(fā)表評論

0條評論

ningwang

男|高級講師

TA的文章

liteserver：荷蘭大硬盤vps;1核/1G內(nèi)存/512G HDD/1G帶寬/10T月流量,€

Totyun：上新柬埔寨VPS，2核2G內(nèi)存，10Mps Premium 中國，$12/月起

UCloud優(yōu)刻得海外混合云上線實(shí)現(xiàn)全球混合多云互聯(lián)

原生JS實(shí)現(xiàn)滑動輪播圖

為你推薦幾款開發(fā)常用的代碼編輯器

css 響應(yīng)式（媒介查詢）

深入了解JS數(shù)組的常用方法

vue-router 基礎(chǔ)知識點(diǎn)

最新活動

資訊專欄INFORMATION COLUMN

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

koa2源碼分析

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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