最近需要單獨(dú)使用到koa-compose這個(gè)模塊，雖然使用koa的時(shí)候大致知道中間件的執(zhí)行流程，但是沒(méi)仔細(xì)研究過(guò)源碼用起來(lái)還是不放心(主要是這個(gè)模塊代碼少，多的話也沒(méi)興趣去研究了)。

koa-compose看起來(lái)代碼少，但是確實(shí)繞。閉包，遞歸，Promise。。。看了一遍腦子里繞不清楚?？戳司W(wǎng)上幾篇解讀文章，都是針對(duì)單行代碼做解釋，還是繞不清楚。最后只好采取一種傻瓜的方式：

koa-compose去掉一些注釋，類型校驗(yàn)后，源碼如下：

function compose (middleware) { 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]   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)   }  } }}

寫(xiě)出如下代碼：

var index = -1;function compose() {  return dispatch(0)}function dispatch (i) {   if (i <= index) return Promise.reject(new Error('next() called multiple times'))   index = i   var fn = middleware[i]   if (i === middleware.length) fn = next   if (!fn) return Promise.resolve('fn is undefined')   try {    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));   } catch (err) {    return Promise.reject(err)   } }  function f1(context,next){  console.log('middleware 1');  next().then(data=>console.log(data));  console.log('middleware 1');  return 'middleware 1 return'; } function f2(context,next){  console.log('middleware 2');  next().then(data=>console.log(data));  console.log('middleware 2');  return 'middleware 2 return'; } function f3(context,next){  console.log('middleware 3');  next().then(data=>console.log(data));  console.log('middleware 3');  return 'middleware 3 return'; }var middleware=[ f1,f2,f3]var context={};var next=function(context,next){  console.log('middleware 4');  next().then(data=>console.log(data));  console.log('middleware 4');  return 'middleware 4 return';};compose().then(data=>console.log(data));

直接運(yùn)行結(jié)果如下：

"middleware 1"

"middleware 2"

"middleware 3"

"middleware 4"

"middleware 4"

"middleware 3"

"middleware 2"

"middleware 1"

"fn is undefined"

"middleware 4 return"

"middleware 3 return"

"middleware 2 return"

"middleware 1 return"

按著代碼運(yùn)行流程一步步分析：

dispatch(0)

i==0,index==-1 i>index 往下

index=0fn=f1Promise.resolve(f1(context, dispatch.bind(null, 0 + 1)))

這就會(huì)執(zhí)行

f1(context, dispatch.bind(null, 0 + 1))