聊一聊KOA的洋葱模型

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

其实KOA是什么，相比不用我多说，很多前端的小伙伴都了解或用过这个东西。我们直接进入主题，说一说koa中最重要的一个概念：洋葱模型。

什么是洋葱模型？

我们先来看一个demo：

const Koa = require('koa');

// 应用程序
const app = new Koa();

// 中间件1
app.use((ctx, next) => {
    console.log(1);
    next();
    console.log(2);
});

// 中间件2
app.use((ctx, next) => {
    console.log(3);
    next();
    console.log(4);
});

app.listen(9000, '0.0.0.0', () => {
    console.log(`Server is starting`);
});

浏览器输入localhost:9000，控制台会有如下打印：

1
3
4
2

其实很明显，在koa的中间件中，通过next函数，将中间件分成了两部分，next上面的一部分会首先执行，而下面的一部分则会在所有后续的中间件调用之后执行。

来看一个非常经典的图：


这两张图是讲洋葱模型必会提到的，我们看第二张图，其实不难发现，会有两次进入同一个中间件的行为，而且是在所有第一次的中间件执行之后，才依次返回上一个中间件。

洋葱模型差不求多就是这样，可以品一下，细品一下。

为什么要保持洋葱模型

当我们使用koa进行开发的时候，因为读取数据库或是http请求等都是异步请求，所以我们为了保证洋葱模型会使用号称异步终极解决方案的async/await。

const Koa = require('koa');
const axios = require('axios');

// 应用程序
const app = new Koa();

// 中间件1
app.use(async (ctx, next) => {
    // 利用洋葱模型计算请求耗费时长
    const start = new Date();
    await next();
    const delta = new Date() - start;
    console.log(`请求耗时：${delta}ms`);
});

// 中间件2
app.use(async (ctx, next) => {
    // 利用洋葱模型对后续中间件得到的结果进行处理
    await next();
    console.log(ctx.baiduHTML);
});

// 中间件3
app.use(async (ctx, next) => {
    ctx.baiduHTML = await axios.get('http://baidu.com');
});

app.listen(9000, '0.0.0.0', () => {
    console.log(`Server is starting`);
});

上面的例子列出了一些使用洋葱模型的好处，计时，对后续中间件返回的结果进行处理。这也解释了我们为什么需要保证洋葱模型。