koa2洋葱中学习async

因为记性差所以记录下来，看源码更多的时候看一种思想，koa2使用了很多es6的语法，所以就以看源码来学习语法吧。看完koa的源码，最核心的一块就是洋葱式调用。所以我就单独吧这块的代码简化下来，以便自己以后突然想起来再看的时候不需要重新去捋思路了。

首先创建一个存储函数的数组middleware
app.use将中间件存入middleware数组，数组准备好以后启动服务
启动服务以后调用回调，将middleware数组里中间件递归执行一次
执行结束后返回Promise
我就以这个顺序把函数独立出来，并且删了一些原作者验证的代码和console代码，这里假设每个方法都是属于app这个实例的，就不以app.来写了。独立出来

middleware是在实例上创建了一个空数组，

 use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
    if (isGeneratorFunction(fn)) {

        fn = convert(fn);
        //转换为async 函数
    }
    this.middleware.push(fn);
    return this;
    //返回新实例
}

复制代码

use方法就是将所有中间件放入middleware里。

app.listen(3000, () => {

})


复制代码

数组准备好以后启动服务

listen(...args) {

    const server = http.createServer(this.callback());
    return server.listen(...args);
}

复制代码

创建node服务器调用回调

 callback() {
    const fn = compose(this.middleware);

    if (!this.listeners('error').length) this.on('error', this.onerror);

    const handleRequest = (req, res) => {
        const ctx = this.createContext(req, res);
        return this.handleRequest(ctx, fn);
    };

    return handleRequest;
}
复制代码

callback在回调里调用compose方法

function compose (middleware) {
   //middleware 回调数组
    return function (context, next) {
        // last called middleware #
        let index = -1;
        return dispatch(0)
    }
    //返回一个prm状态
}
复制代码

返回一个Promise对象告诉递归调用完成的结果

function dispatch (i) {
    if (i <= index) return Promise.reject(new Error('next() called multiple times'))
    //判断如果i小于index直接返回错误
    index = i;
    let fn = middleware[i]; //取出数组中对应下标函数
    if (i === middleware.length) fn = next;
   
    if (!fn) return Promise.resolve();
    
    try {
        return Promise.resolve(fn(context, function next () {
            return dispatch(i + 1)
            //递归调用
        }))
    } catch (err) {
        return Promise.reject(err)
    }
}
因为是async  所以当 await 接收到返回的Promise结果以后就会逐个执行下去 ，
也就是说当async函数被逐个执行完毕以后返回一个Promise对象，那么就会从async函数最后一个await逐个向上返回调用，直到所有await执行完毕。
这就是洋葱式调用
 async function(){
  await fun1(async function() {
    await fun2(async function() {
      await fun3(async function(){
        return Promise.resolve();
      });
    });
  });
};
上一级的await一直在等待下一级的返回结果，所以逐级向下执行，在等到执行了Promise.resolve();有了返回结果以后再逐级向上返回
//
复制代码

递归调用的具体执行

 handleRequest(ctx, fnMiddleware) {
   
    return fnMiddleware(ctx).then(handleResponse).catch(onerror);
    //fnMiddleware 就是递归执行完毕以后返回prm对象接收一个函数
}
//callback里调永compose函数并将middleware传递过去

复制代码

//最后一行其实就是返回的fn对象

总结

koa的思想其实就是运用了es7的新特性async函数的新特性，逐个等待异步的结果，一旦下层的返回结果就会逐个告诉转达给上层，就形成了洋葱式的调用，所以要读懂源码必须了解async函数，所以在读码的时候也同时学习复习了async函数，还是很不错的。如果不懂这个函数也许会在递归调用那块搞晕，会不明白递归调用完了以后为什么会按顺序返回结果。我觉得搞懂这个就算是搞懂koa2的核心思想了，其他的都是一些封装函数，可以慢慢看

app.use(async (ctx, next) => {
  console.log(1)
  //典型语法await在等待
  await next();
  console.log(2)
});
app.use(async (ctx, next) => {
  console.log(3)
  //典型语法await在等待
  await next();
  console.log(5)
});
返回结果 是 1,3,5,2，
这就是洋葱
这里附上经典的图吧

复制代码

转载于:https://juejin.im/post/5cf749fef265da1baa1e626d