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)
}
}
}
}

我很奇怪的就是 24行代码 为啥要在递归执行完所有中间件后， i === 中间件数组长度，也就是没有中间件可以在执行时，

next会赋值给fn， 我调试的时候发现，他们都是undefined，啥情况才不会是undefiend？

另外一提，我感觉无论是回调还是递归，本质还跟js执行栈和异步队列有关系，老的中间件进栈，执行dispatch，把promise.resolve()里面的中间件推进异步队列，然后队列遵循先进先出的原则，这个新的中间件就退出队列，进入执行栈，然后出栈，最后才是上一个中间件出栈