理解Koa洋蔥模型

yearsj 發(fā)布于2019-08-26 10:23 / 2040人閱讀

摘要：的嵌套就像是洋蔥模型的形狀就是一層包裹著一層，直到到最里面一層的的值返回。中間件引擎是有模塊來實現(xiàn)的，也就是實現(xiàn)洋蔥模型的核心引擎。表示遍歷還沒有結(jié)束。

中間件特性

    |                                                                                  |
    |                              middleware 1                                        |
    |                                                                                  |
    |          +-----------------------------------------------------------+           |
    |          |                                                           |           |
    |          |                    middleware 2                           |           |
    |          |                                                           |           |
    |          |            +---------------------------------+            |           |
    |          |            |                                 |            |           |
    | action   |  action    |        middleware 3             |    action  |   action  |
    | 001      |  002       |                                 |    005     |   006     |
    |          |            |   action              action    |            |           |
    |          |            |   003                 004       |            |           |
    |          |            |                                 |            |           |

+---------------------------------------------------------------------------------------------------->

    |          |            |                                 |            |           |
    |          |            |                                 |            |           |
    |          |            +---------------------------------+            |           |
    |          +-----------------------------------------------------------+           |
    +----------------------------------------------------------------------------------+

先寫一段貫穿全文的koa的代碼

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

const middleware1 = async (ctx, next) => { 
  console.log(1); 
  await next();  
  console.log(6);   
}

const middleware2 = async (ctx, next) => { 
  console.log(2); 
  await next();  
  console.log(5);   
}

const middleware3 = async (ctx, next) => { 
  console.log(3); 
  await next();  
  console.log(4);   
}

app.use(middleware1);
app.use(middleware2);
app.use(middleware3);
app.use(async(ctx, next) => {
  ctx.body = "hello world"
})

app.listen(3001)

// 輸出1，2，3，4，5，6

await next()使每個middleware分成，前置操作，等待其他中間件操作可以觀察到中間件的特性有：

上下文ctx

await next()控制前后置操作

后置操作類似于數(shù)據(jù)解構(gòu)-棧，先進后出

promise 的模擬實現(xiàn)

Promise.resolve(middleware1(context, async() => {
  return Promise.resolve(middleware2(context, async() => {
    return Promise.resolve(middleware3(context, async() => {
      return Promise.resolve();
    }));
  }));
}))
.then(() => {
    console.log("end");
});

從這段模擬代碼我們可以知道next()返回的是promise，需要使用await去等待promise的resolve值。promise的嵌套就像是洋蔥模型的形狀就是一層包裹著一層，直到await到最里面一層的promise的resolve值返回。

思考：

如果next()不加await執(zhí)行順序是什么呢？
在這個例子里面如果只是next()執(zhí)行順序跟await next()是一樣的，因為next的前置操作是同步的

如果前置操作是異步的操作呢？

const p = function(args) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(args);
      resolve();
    }, 100);
  });
};

const middleware1 = async (ctx, next) => {
  await p(1);
  // await next();
  next();
  console.log(6);
};

const middleware2 = async (ctx, next) => {
  await p(2);
  // await next();
  next();
  console.log(5);
};

const middleware3 = async (ctx, next) => {
  await p(3);
  // await next();
  next();
  console.log(4);
};
// 輸出結(jié)果：1，6，2，5，3，4

當程序執(zhí)行到middleware1，執(zhí)行到await p(1)等待promise值返回跳出然后到下一個事件循環(huán)時，執(zhí)行next()也就是執(zhí)行到middleware2，再執(zhí)行到await p(2)等待promise值返回跳出middleware2，回到middleware1繼續(xù)執(zhí)行console.log(6),以此類推輸出順序為1.6.2.5.3.4

Promise的嵌套雖然可以實現(xiàn)中間件流程，但是嵌套的代碼會產(chǎn)生可維護性和可讀性的問題，也帶來中間件擴展的問題。

Koa.js中間件引擎是有koa-compose模塊來實現(xiàn)的，也就是Koa.js實現(xiàn)洋蔥模型的核心引擎。

koa-compose 實現(xiàn)

  this.middleware = [];
  use(fn) {
    this.middleware.push(fn);
    ……
 }
 callback() {
    const fn = compose(this.middleware);
    ……
 }
 
function compose (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
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

Koa實現(xiàn)的代碼非常簡潔，我們在使用use的時候?qū)iddleware存在一個數(shù)組里面，當攔截到請求時執(zhí)行callback方法，callback中調(diào)用了compose，compose方法使用遞歸執(zhí)行中間件，遍歷完成返回promise.resolve()，實際最后執(zhí)行的代碼也是上面所講的promise嵌套的形式。

擴展：Await與Generator

通常我們的都會說await阻塞后面的操作等待promise的resolve返回值或者其他值，如果沒有await這個語法糖，要怎么去實現(xiàn)呢？這個等待的過程是怎么控制的呢？

Generator

Generator實際上是一個特殊的迭代器

let gen = null;
function* genDemo(){
  console.log(1)
  yield setTimeout(()=>{
    console.log(3);
    gen.next();// c
  },100)
  console.log(4)
}
gen = genDemo();// a
gen.next(); // b

a. 調(diào)用generator，該函數(shù)不執(zhí)行，也就是還沒有輸出1，返回的是指向內(nèi)部狀態(tài)的遍歷對象。
b. generator函數(shù)開始執(zhí)行，輸出1，遇到第一個yeild表達式停下來,調(diào)用gen.next()返回一個對象{value: 10, done:false}，這里的value表示setTimeout的一個標識值，也就是調(diào)用clearTimeout的參數(shù)，是一個數(shù)字。done表示遍歷還沒有結(jié)束。100毫秒后輸出3；
c. Generator函數(shù)從上次在yeild停止的地方一直執(zhí)行到函數(shù)結(jié)束（沒有其他的yeild），輸出4，返回{value: undefined,done:true}，表示遍歷結(jié)束。

可以看到y(tǒng)eild有控制代碼進度的作用，是不是跟await有異曲同工之妙
來看下await編譯成generator形式的代碼,雖然多了一些代碼，但是我們可以把_asyncToGenerator(function*() {……}調(diào)用generator，把asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);看成是gen.next()；就很容易理解了。

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }
  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

function _asyncToGenerator(fn) {
  return function() {
    var self = this,
      args = arguments;
    return new Promise(function(resolve, reject) {
      var gen = fn.apply(self, args);
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
      }
      _next(undefined);
    });
  };
}

const middleware1 =
  /*#__PURE__*/
  (function() {
    var _ref = _asyncToGenerator(function*(ctx, next) {
      console.log(1);
      yield next();
      console.log(6);
    });

    return function middleware1(_x, _x2) {
      return _ref.apply(this, arguments);
    };
  })();

const middleware2 =
  /*#__PURE__*/
  (function() {
    var _ref2 = _asyncToGenerator(function*(ctx, next) {
      console.log(2);
      yield next();
      console.log(5);
    });

    return function middleware2(_x3, _x4) {
      return _ref2.apply(this, arguments);
    };
  })();

const middleware3 =
  /*#__PURE__*/
  (function() {
    var _ref3 = _asyncToGenerator(function*(ctx, next) {
      console.log(3);
      yield next();
      console.log(4);
    });

    return function middleware3(_x5, _x6) {
      return _ref3.apply(this, arguments);
    };
  })();

Promise.resolve(
  middleware1(
    context,
    /*#__PURE__*/
    _asyncToGenerator(function*() {
      return Promise.resolve(
        middleware2(
          context,
          /*#__PURE__*/
          _asyncToGenerator(function*() {
            return Promise.resolve(
              middleware3(
                context,
                /*#__PURE__*/
                _asyncToGenerator(function*() {
                  return Promise.resolve();
                })
              )
            );
          })
        )
      );
    })
  )
).then(() => {
  console.log("end");
});

參考鏈接：
https://chenshenhai.github.io...
https://segmentfault.com/a/11...

云服務(wù)器 GPU云服務(wù)器洋蔥數(shù)學洋蔥 linux 洋蔥密碼洋蔥頭服務(wù)器

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

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

發(fā)表評論

登陸后可評論

0條評論

yearsj

男|高級講師

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

TA的文章

tensorflow用gpu

閱讀 2152·2023-04-26 00:23
因算法出現(xiàn)歧視問題，F(xiàn)acebook 緊急下架相關(guān)話題推薦功能，

閱讀 826·2021-09-08 09:45
CSS > 行內(nèi)格式化上下文中的各種高度計算

閱讀 2446·2019-08-28 18:20
《JavaScript高級程序設(shè)計》（第3版）讀書筆記第10章 DOM

閱讀 2553·2019-08-26 13:51
前端項目修改默認滾動條樣式

閱讀 1606·2019-08-26 10:32
ES6之Proxy & Reflection API

閱讀 1405·2019-08-26 10:24
理解Koa洋蔥模型

閱讀 2041·2019-08-26 10:23
JavaScript常用6大繼承方式解析

閱讀 2208·2019-08-23 18:10

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

資訊專欄INFORMATION COLUMN

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

理解Koa洋蔥模型

相關(guān)文章

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

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

**深入koa源碼（二）：核心庫原理**

**深入探析koa之中間件流程控制篇**

發(fā)表評論

0條評論

yearsj

男|高級講師

TA的文章

tensorflow用gpu

因算法出現(xiàn)歧視問題，F(xiàn)acebook 緊急下架相關(guān)話題推薦功能，

CSS > 行內(nèi)格式化上下文中的各種高度計算

《JavaScript高級程序設(shè)計》（第3版）讀書筆記第10章 DOM

前端項目修改默認滾動條樣式

ES6之Proxy & Reflection API