今天就跟大家聊聊有關(guān)node中koa中間件機(jī)制的原理是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為永昌企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、做網(wǎng)站，永昌網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

koa

koa是由express原班人馬打造的一個更小、更富有表現(xiàn)力、更健壯的web框架。

在我眼中，koa的確是比express輕量的多，koa給我的感覺更像是一個中間件框架，koa只是一個基礎(chǔ)的架子，需要用到的相應(yīng)的功能時，用相應(yīng)的中間件來實現(xiàn)就好，諸如路由系統(tǒng)等。一個更好的點在于，express是基于回調(diào)來處理，至于回調(diào)到底有多么的不好，大家可以自行搜索來看。koa1基于的co庫，所以koa1利用Generator來代替回調(diào)，而koa2由于node對async/await的支持，所以koa2利用的是async/await。關(guān)于async以及co庫等，大家可以參考我之前寫過的一篇文章（理解async）。koa可以說是一個各種中間件的架子，下面就來看一下koa對于中間件部分的實現(xiàn)：

koa1的中間件

koa1主要利用的是Generator來實現(xiàn)，一般來說，koa1的一個中間件大概是長這個樣子的：

app.use(function *(next){
  console.log(1);
  yield next;
  console.log(5);
});
app.use(function *(next){
  console.log(2);
  yield next;
  console.log(4);
});
app.use(function *(){
  console.log(3);
});

這樣的輸出會是1, 2, 3, 4, 5，koa的中間件的實現(xiàn)主要依靠的是koa-compose：

function compose(middleware){
 return function *(next){
  if (!next) next = noop();

  var i = middleware.length;
  // 組合中間件
  while (i--) {
   next = middleware[i].call(this, next);
  }

  return yield *next;
 }
}
function *noop(){}

源碼非常的簡單，實現(xiàn)的功能就是將所有的中間件串聯(lián)起來，首先給倒數(shù)第一個中間件傳入一個noop作為其next，再將這個整理后的倒數(shù)第一個中間作為next傳入倒數(shù)第二個中間件，最終得到的next就是整理后的第一個中間件。說起來比較復(fù)雜，畫圖來看：

實現(xiàn)的效果如同上圖，與redux需要實現(xiàn)的目標(biāo)類似，只要遇到了yield next就去執(zhí)行下一個中間件，利用co庫很容易將這個流程串聯(lián)起來，下面來簡單模擬下，中間件完整的實現(xiàn)：

const middlewares = [];

const getTestMiddWare = (loggerA, loggerB) => {
  return function *(next) {
    console.log(loggerA);
    yield next;
    console.log(loggerB);
  }
};
const mid1 = getTestMiddWare(1, 4),
  mid2 = getTestMiddWare(2, 3);

const getData = new Promise((resolve, reject) => {
  setTimeout(() => resolve('數(shù)據(jù)已經(jīng)取出'), 1000);
});

function *response(next) {
  // 模擬異步讀取數(shù)據(jù)庫數(shù)據(jù)
  const data = yield getData;
  console.log(data);
}

middlewares.push(mid1, mid2, response);
// 簡單模擬co庫
function co(gen) {
  const ctx = this,
    args = Array.prototype.slice.call(arguments, 1);
  return new Promise((reslove, reject) => {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    const baseHandle = handle => res => {
      let ret;
      try {
        ret = gen[handle](res);
      } catch(e) {
        reject(e);
      }
      next(ret);
    };
    const onFulfilled = baseHandle('next'),
      onRejected = baseHandle('throw');
      
    onFulfilled();
    function next(ret) {
      if (ret.done) return reslove(ret.value);
      // 將yield的返回值轉(zhuǎn)換為Proimse
      let value = null;
      if (typeof ret.value.then !== 'function') {
        value = co(ret.value);
      } else {
        value = ret.value;
      }
      if (value) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('yield type error'));
    }
  });
}
// 調(diào)用方式
const gen = compose(middlewares);
co(gen);

koa2的中間件

隨著node對于async/await的支持，貌似不需要再借助于co這種工具庫了，直接利用原生的就好，于是koa也做出了改變，來看目前的koa-compose：

function compose (middleware) {
 // 參數(shù)檢驗
 return function (context, next) {
  // last called middleware #
  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]
   // 最后一個中間件的調(diào)用
   if (i === middleware.length) fn = next
   if (!fn) return Promise.resolve()
   // 用Promise包裹中間件，方便await調(diào)用
   try {
    return Promise.resolve(fn(context, function next () {
     return dispatch(i + 1)
    }))
   } catch (err) {
    return Promise.reject(err)
   }
  }
 }
}

koa-compose利用了Promise，koa2的中間件的參數(shù)也有一個變?yōu)榱藘蓚€，而且執(zhí)行下一個的中間件利用的是await next()，要達(dá)到與上面的示例代碼的相同效果，需要更改中間件的寫法：

const middlewares = [];
const getTestMiddWare = (loggerA, loggerB) => async (ctx, next) => {
  console.log(loggerA);
  await next();
  console.log(loggerB);
};

const mid1 = getTestMiddWare(1, 4),
  mid2 = getTestMiddWare(2, 3);
const response = async () => {
  // 模擬異步讀取數(shù)據(jù)庫數(shù)據(jù)
  const data = await getData();
  console.log(data);
};
const getData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve('數(shù)據(jù)已經(jīng)取出'), 1000);
});
middlewares.push(mid1, mid2);

// 調(diào)用方式
compose(middlewares)(null, response);

如何做到兼容

可以看到的是，koa1與koa2對于中間件的實現(xiàn)還是有著很多的不同的，將koa1的中間件直接拿到koa2下面來使用肯定是會出現(xiàn)錯誤的，如何兼容這兩個版本也成了一個問題，koa團(tuán)隊寫了一個包來是koa1的中間件可以用于koa2中，叫做koa-convert，先來看看這個包怎么使用：

function *mid3(next) {
  console.log(2, 'koa1的中間件');
  yield next;
  console.log(3, 'koa1的中間件');
}
convert.compose(mid3)

來看下這個包實現(xiàn)的思路：

// 將參數(shù)轉(zhuǎn)為數(shù)組，對每一個koa1的中間件執(zhí)行convert操作
convert.compose = function (arr) {
 if (!Array.isArray(arr)) {
  arr = Array.from(arguments)
 }
 return compose(arr.map(convert))
}
// 關(guān)鍵在于convert的實現(xiàn)
const convert = mw => (ctx, next) => {
  // 借助co庫，返回一個Promise，同時執(zhí)行yield
  return co.call(ctx, mw.call(ctx, createGenerator(next)));
};

function * createGenerator (next) {
 /*
   next為koa-compomse中：
   function next () {
     return dispatch(i + 1)
   }
 */
 return yield next()
 // 執(zhí)行完koa1的中間件，又回到了利用await執(zhí)行koa2中間件的正軌
}

個人感覺koa-convert的思路就是對Generator封裝一層Promise，使上一個中間件可以利用await next()的方式調(diào)用，對于Generator的執(zhí)行，利用co庫，從而達(dá)到了兼容的目的。

看完上述內(nèi)容，你們對node中koa中間件機(jī)制的原理是什么有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章標(biāo)題：node中koa中間件機(jī)制的原理是什么
文章地址：http://m.rwnh.cn/article44/jejjhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、自適應(yīng)網(wǎng)站、云服務(wù)器、動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)