koa2源码简单分析(三)

接上篇分析，今天分析koa-compose这个库的源码，这个库的思想就是一个复合函数的思想，是将多个中间件函数合并到一个中间件函数执行。
先来看看其核心代码

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
      console.log(context);
      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)
      }
    }
  }
}

其实从代码可以看出，这个思想在上篇中的思想基本上一致，都是调用了compose函数，这个函数出入的middleware参数，这个参数代表一个数组。
我们来按照此方法一步一步来解析它的构成。
新建立一个test.js文件

function a(args) {
    return function() {
    }
}

function one(){
    console.log('第一个');
}
function two(){
    console.log('第二个');
}
function three(){
    console.log('第三个');
}
let news = a([one, two, three]) 

在上面文件中，我们可以看到a()函数调用后，我们其实返回的是一个function。
现在我们继续完善a()

function a(args) {
    return function() {
        let index =-1;  //定义一个索引值
        return dispath(0)   //返回调用的方法
       //定义要调用的方法
        function dispath (i) {
            index = i;  //将当前调用的索引值赋值给定义的索引值
            let fn = args[i]  //获取args的数组索引值的方法
            //返回的是一个Promise
            try {
                return Promise.resolve(fn())
            } catch (e) {
                return Promise.reject(e)
            }

        }
    }
}

我们运行上面的代码后，可以看到我们返回的是第一个函数执行后的返回的数据，也就是输出“第一个”。
那么我们怎么来实现Koa中的洋葱模型呢，继续完善a()的代码：

function a(args) {
    return function() {
        let index =-1;  //定义一个索引值
        return dispath(0)   //返回调用的方法
       //定义要调用的方法
        function dispath (i) {
            index = i;  //将当前调用的索引值赋值给定义的索引值
            let fn = args[i]  //获取args的数组索引值的方法
            //返回的是一个Promise
            try {
                //重点看fn里面的方法，可以看到fn第二个参数就是next()，执行next()方法就是调用下一个中间件函数，这就是为啥子我们每个中间件方法中智能有一个next()的原因
                return Promise.resolve(fn(content, function next() {
                    return dispath(i + 1)
                }))
            } catch (e) {
                return Promise.reject(e)
            }
        }
    }
}

分析完前面三段代码后，我们运行这个文件，就可以看到输出

第一个
第二个
第三个

当然我们可以在每个中间件执行完后，也可以执行回调函数，先补充第一个中间件函数：

function one(ctx,next){
    console.log('第一个');
    next().then(()=> {
        console.log("我是第一个回调函数")
    });
}

再次运行这个文件，执行结果就变成了：

第一个
第二个
第三个
我是第一个回调函数

这就是实现了所谓的“洋葱模型”。