聊一聊KOA的洋蔥模型

Koa 是一個新的 web 框架，由 Express 幕後的原班人馬打造， 致力於成爲 web 應用和 API 開發領域中的一個更小、更富有表現力、更健壯的基石。 經過利用 async 函數，Koa 幫你丟棄回調函數，並有力地加強錯誤處理。 Koa 並無捆綁任何中間件， 而是提供了一套優雅的方法，幫助您快速而愉快地編寫服務端應用程序。

其實KOA是什麼，相比不用我多說，不少前端的小夥伴都瞭解或用過這個東西。咱們直接進入主題，說一說koa中最重要的一個概念：洋蔥模型。

什麼是洋蔥模型？

咱們先來看一個demo：

const Koa = require('koa');

// 應用程序
const app = new Koa();

// 中間件1
app.use((ctx, next) => {
    console.log(1);
    next();
    console.log(2);
});

// 中間件2
app.use((ctx, next) => {
    console.log(3);
    next();
    console.log(4);
});

app.listen(9000, '0.0.0.0', () => {
    console.log(`Server is starting`);
});

瀏覽器輸入localhost:9000，控制檯會有以下打印：

1
3
4
2

其實很明顯，在koa的中間件中，經過next函數，將中間件分紅了兩部分，next上面的一部分會首先執行，而下面的一部分則會在全部後續的中間件調用以後執行。

來看一個很是經典的圖：


這兩張圖是講洋蔥模型必會提到的，咱們看第二張圖，其實不難發現，會有兩次進入同一個中間件的行爲，並且是在全部第一次的中間件執行以後，才依次返回上一個中間件。

洋蔥模型差不求多就是這樣，能夠品一下，細品一下。

爲何要保持洋蔥模型

當咱們使用koa進行開發的時候，由於讀取數據庫或是http請求等都是異步請求，因此咱們爲了保證洋蔥模型會使用號稱異步終極解決方案的async/await。

const Koa = require('koa');
const axios = require('axios');

// 應用程序
const app = new Koa();

// 中間件1
app.use(async (ctx, next) => {
    // 利用洋蔥模型計算請求耗費時長
    const start = new Date();
    await next();
    const delta = new Date() - start;
    console.log(`請求耗時：${delta}ms`);
});

// 中間件2
app.use(async (ctx, next) => {
    // 利用洋蔥模型對後續中間件獲得的結果進行處理
    await next();
    console.log(ctx.baiduHTML);
});

// 中間件3
app.use(async (ctx, next) => {
    ctx.baiduHTML = await axios.get('http://baidu.com');
});

app.listen(9000, '0.0.0.0', () => {
    console.log(`Server is starting`);
});

上面的例子列出了一些使用洋蔥模型的好處，計時，對後續中間件返回的結果進行處理。這也解釋了咱們爲何須要保證洋蔥模型。