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

william 發(fā)布于2019-08-23 14:03 / 1911人閱讀

摘要：洋蔥圈處理模型。基于的靈活強(qiáng)大的中間件機(jī)制。參考官網(wǎng)提供的基本，不在贅述部分實(shí)現(xiàn)，參考源碼分析常用服務(wù)端口監(jiān)聽返回適用于方法的回調(diào)函數(shù)來處理請(qǐng)求。

本文 github 地址： https://github.com/HCThink/h-blog/blob/master/source/koa2/readme.md

github 首頁(star+watch，一手動(dòng)態(tài)直達(dá))： https://github.com/HCThink/h-blog

掘金 link , 掘金專欄

segmentfault 主頁

原創(chuàng)禁止私自轉(zhuǎn)載

koa2

koa homepage

優(yōu)秀的下一代 web 開發(fā)框架。
Koa 應(yīng)用程序不是 HTTP 服務(wù)器的1對(duì)1展現(xiàn)。 可以將一個(gè)或多個(gè) Koa 應(yīng)用程序安裝在一起以形成具有單個(gè)HTTP服務(wù)器的更大應(yīng)用程序。

基礎(chǔ)使用 快速搭建簡易 koa server 服務(wù)

koa 搭建一個(gè)服務(wù)還是很簡單的, 主要代碼如下，完整代碼如下. 切到主目錄下，

安裝依賴： yarn

執(zhí)行入口： yarn start

koa demo 目錄

koa demo 主文件

import Koa from "koa";
import https from "https";
import open from "open";

const Log = console.log;
const App = new Koa();

App.use(async (ctx, next) => {
    ctx.body = "Hello World";
    Log("mid1 start...");
    await next();
    Log("mid1 end...");
});

App.use(async (ctx, next) => {
    debugger;
    Log("mid2 start...");
    await next();
    Log("mid2 end...");
});


App.use((ctx, next) => {
    Log("mid3...");
});

// 服務(wù)監(jiān)聽： 兩種方式。
App.listen(3000);           // 語法糖
// http.createServer(app.callback()).listen(3000);
https.createServer(App.callback()).listen(3001);

open("http://localhost:3000");

// 如下為執(zhí)行順序， 實(shí)際上 http 會(huì)握手，所以輸出多次
// 如下執(zhí)行特征也就是洋蔥圈， 實(shí)際上熟悉 async、await 則不會(huì)比較意外。
// mid1 start...
// mid2 start...
// mid3...
// mid2 end...
// mid1 end...

koa2特性

封裝并增強(qiáng) node http server[request, response]，簡單易容。

洋蔥圈處理模型。

基于 async/await 的靈活強(qiáng)大的中間件機(jī)制。

通過委托使得 api 在使用上更加便捷易用。

api

參考官網(wǎng)提供的基本 api ，不在贅述： https://koa.bootcss.com/

部分 api 實(shí)現(xiàn)，參考：源碼分析

常用 api

app.listen: 服務(wù)端口監(jiān)聽

app.callback: 返回適用于 http.createServer() 方法的回調(diào)函數(shù)來處理請(qǐng)求。你也可以使用此回調(diào)函數(shù)將 koa 應(yīng)用程序掛載到 Connect/Express 應(yīng)用程序中。

app.use(function): 掛載中間件的主要方法。

核心對(duì)象

context

Koa Context 將 node 的 request 和 response 對(duì)象封裝到單個(gè)對(duì)象中，為編寫 Web 應(yīng)用程序和 API 提供了許多有用的方法。這些操作在 HTTP 服務(wù)器開發(fā)中頻繁使用，它們被添加到此級(jí)別而不是更高級(jí)別的框架，這將強(qiáng)制中間件重新實(shí)現(xiàn)此通用功能。__每個(gè)__ 請(qǐng)求都將創(chuàng)建一個(gè) Context，并在中間件中作為接收器引用，或者 ctx 標(biāo)識(shí)符。

ctx.res request

ctx.req： response

ctx.request： koa request tool

ctx.response： koa response tool

ctx.cookies

ctx.request.accepts(types): type 值可能是一個(gè)或多個(gè) mime 類型的字符串，如 application/json，擴(kuò)展名稱如 json，或數(shù)組 ["json", "html", "text/plain"]。

request.acceptsCharsets(charsets)

...

更多參考

洋蔥圈 使用層面

koa 洋蔥圈執(zhí)行機(jī)制圖解

koa 洋蔥圈

koa demo, koa demo 源碼

洋蔥圈簡易實(shí)現(xiàn)版

執(zhí)行方式： tsc onionRings.ts --lib "es2015" --sourceMap && node onionRings.js

洋蔥圈簡易實(shí)現(xiàn)版 main, 洋蔥圈簡易實(shí)現(xiàn)版源碼

簡易實(shí)現(xiàn) 外部中間件

參考： koa-bodyparser

main code

public use(middleware: Function) {
    this.middList.push(middleware);
}

// 執(zhí)行器
private async deal(i: number = 0) {
    debugger;
    if (i >= this.middList.length) {
        return false;
    }
    await this.middList[i](this, this.deal.bind(this, i + 1));
}

實(shí)現(xiàn)思路

use 方法注冊(cè) middleware。

deal 模擬一個(gè)執(zhí)行器: 大致思路就是將下一個(gè) middleware 作為上一個(gè) middleware 的 next 去 await，用以保證正確的執(zhí)行順序和中斷。

問題

如果習(xí)慣了回調(diào)的思路， 你會(huì)不會(huì)有這種疑惑： 洋蔥圈機(jī)制于在 一個(gè)中間件中調(diào)用另一個(gè)中間件，被調(diào)中間件執(zhí)行成功，回到當(dāng)前中間件繼續(xù)往后執(zhí)行，這樣不斷調(diào)用，中間件很多的話， 會(huì)不會(huì)形成一個(gè)很深的函數(shù)調(diào)用棧？ 從而影響性能， 同時(shí)形成「xx 地獄」？        -- ps（此問題源于分享時(shí)原同事 小龍 的提問。）

實(shí)際上這是個(gè)很好的問題，對(duì)函數(shù)執(zhí)行機(jī)制比較了解才會(huì)產(chǎn)生的疑問。排除異步代碼處理，我們很容易用同步方式模擬出這種調(diào)用層級(jí)。參考：同步方式。這種模式存在明顯的調(diào)用棧問題。

我可以負(fù)責(zé)任的回答：不會(huì)的，下一個(gè)問題。