KOA中await next分析？

  class Koa {
      constructor() {
        this.middleWaver = []
      }
      use(fn) {
        this.middleWaver.push(fn)
      }
    };

const app = new Koa();

    const f1 = async function (ctx, next) {
      console.log('f1 >>');
      await next(); // 该代码代表f2函数执行返回的结果
      console.log('f1 <<');
    };

    const f2 = async function (ctx, next) {
      console.log('f2 >>');
      await next();// 该代码代表f3函数执行返回的结果
      console.log('2 <<');
    };

    const f3 = async function (ctx, next) {
      console.log('f3 >>');
      await next();
      console.log('f3 <<');
    };

    // 01: 使用use用来收集函数
    app.use(f1);
    app.use(f2);
    app.use(f3);

    const one = mix(app.middleWaver);
    one({ ctx: '上下文' });

 // 02: 闭包传递ctx参数
    const mix = function (mid) {

      /*
        mid收集的所有的中简介
        ctx：上下文  next：下一个函数
        fn(ctx,next)

       推进栈内，最顶部函数触发执行
       01: 第一个执行必须依赖第二的执行结果
       02: 第二个的依赖第三个执行结果
       03: 第三个依赖第四个
       04：直到最底部的执行完毕，然后结果一层一层将结果返回上一层知道最顶层
        
      */
      return function hi(ctx) {

        const i = 0;
        // 类似循环，上一个执行依赖下一个执行的结果
        function dispacth(i) {
          const fn = mid[i];

          if (!fn) {
            return Promise.resolve() // 最后一个unefined,返回给await 一个promise
          };

          // await next() => await等待的是promise函数
          // 确保返回的是promise函数
          return Promise.resolve(fn(ctx, function next() { dispacth(i + 1) }));
        };
        dispacth(0);
      }
    };