koa洋葱模型

koa-compose：koa-compose则是将 koa/koa-router 各个中间件合并执行，结合 next() 形成一种串行机制，并且是支持异步，这样就形成了洋葱式模型

图解：一个洋葱来一刀

洋葱.png

有图有真相：等到next()函数执行完成之后，才会next()后面的代码，那么洋葱心就是最后一个执行完毕的中间件,每个next就是洋葱每一层的分界线

来个中间件试试水：

const Koa = require('koa');

const app = new Koa();

app.use(async (ctx, next) => {
    console.log(1);
    await next();
    console.log(1.1);
});

app.use(async (ctx, next) => {
    console.log(2);
    await next();
    console.log(2.2);
});

app.use(async (ctx, next) => {
    console.log(3);
    await next();
    console.log(3.3);
});

app.listen(3000, () => console.log('listening 3000'));

打印结果

// 1
// 2
// 3
// 3.3
// 2.2
// 1.1

开始剥洋葱~

接收函数，存入数组

  const app = {
    // 存放中间件的数组
    middlewares: [],
    // 存储方法,模拟使用中间件
    use(fn) {
        this.middlewares.push(fn)
    }
};

compose: 开始串联每个函数，使用下标递增，并递归至最后一个函数结束

app.compose = function (middlewares) {
    return function () {
        // 从第一个函数开始
        dispath(0);

        function dispath(idx) {
            // 说明所有中间件都执行结束
            if (idx === app.middlewares.length) return;

            // 取出当前函数
            const fn = middlewares[idx];

            // 执行当前函数，传入next函数
            fn(function next() {
                // 并将下一个函数放入next中
                dispath(idx + 1);
            });
        }
    }
}

考虑支持异步，使用async/await

app.compose = function (middlewares) {
    return async function () {

        await dispath(0);

        async function dispath(idx) {
           
            if (idx === app.middlewares.length) return;

            const fn = middlewares[idx];

            await fn(function next() {
                
                dispath(idx + 1);
            });
        }
    }
}

测试一下

app.use(function (next) {
    console.log(1);
    next();
    console.log(1.1)
})

app.use(function (next) {
    console.log(2);
    next();
    console.log(2.2);

})

app.use(function (next) {
    console.log(3);
    next();
    console.log(3.3);
});


app.compose()(); 
// 执行顺序
// 1
// 2
// 3
// 3.3
// 2.2
// 1.1

为什么要是洋葱模型
如果第一个中间件想得到后续中间件执行后的结果，那我们应该怎么办？

const Koa = require('koa');

const app = new Koa();

app.use(async (ctx, next) => {
    console.log(1);
    await next();
    // 取出lastVal
    console.log(1.1, ctx.lastVal);
});

app.use(async (ctx, next) => {
    console.log(2);
    await next();
    console.log(2.2);
});

app.use(async (ctx, next) => {
    console.log(3);
    await next();
    console.log(3.3);
    // 设置lastVal
    ctx.lastVal = 3.3;
});

app.listen(3000, () => console.log('listening 3000'));

// 1
// 2
// 3
// 3.3
// 2.2
// 1.1 3.3

通过挂载在ctx，我们可以取到最后中间件的结果：这应该就是洋葱模型的真谛了吧~

参考:Koa-compose

koa洋葱模型

开始剥洋葱~

推荐阅读更多精彩内容