CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章使用异步编程保证 Koa 的洋葱模型由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

哈喽大家好!我是小三。今天更的是前端文章，小三前端比较菜，有什么地方写得不对大家可以留言或者联系我探讨修改哦.

koa框架的业务流程是一个完全的异步编程模型，通过ctx上下文对象来贯穿http的上下游。对我们来说最重要的就是理解洋葱模型.

先来看一个经典的洋葱图认识一下 。

我们先来看一下这个代码 。

1. const Koa = require('koa')
2. const app = new Koa()
3. //第一个中间件
4. app.use((ctx, next) => {
5. console.log("第一个中间件", 1);
6. next()
7. console.log("第一个中间件", 2);
8. })
9. //第二个中间件
10. app.use((ctx, next) => {
11. console.log("第二个中间件", 3);
12. next()
13. console.log("第二个中间件", 4);
14. })
15. //第三个中间件
16. app.use((ctx, next) => {
17. console.log("第三个中间件", 5);
18. console.log("第三个中间件", 6);
19. })
20. app.listen(3000, () => {
21. console.log("Koa已经开启在http://loclhost:3000");
22. })

我们运行这个代码在浏览器打开并返回控制台看一下打印 。

第一个中间件 1 。

第二个中间件 3 。

第三个中间件 5 。

第三个中间件 6 。

第二个中间件 4 。

第一个中间件 2 。

大家可以看这段代码，其执行效果为135642，也就是说这就好比第一个中间件把第二个包裹了起来，第三个中间件又把第二个中间件包起来了，调用next时就回去执行第二个中间件，结束后继续执行第一个.

所以他的顺序应该是这样的 。

看到上图相信大家已经非常的了解了吧.

然后下面我们会用到async await这个语法糖，我在这里简单介绍一下async函数 。

它是generator函数的语法糖，可以通过 yield(中文翻译动词为提供，暂时叫他提供) 关键字，就是把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案.

async函数，就是将generator函数的*换成async，将yield替换成await 。

简单来说async/await，就是异步编程回调函数写法的替代方法，暂且就说这么多，下一篇文章我再详细介绍async await函数， 。

再多说一句 async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值.

我们再反观这个洋葱模型 。

然后我再在第三个中间件加了个axios请求，因为他是异步的操作，所以我得再在前面加个async，然后再在请求的前面加个await，这样我们就可以得到get请求的这个结果，如果不加，他返回的是一个Promise对象 。

这里是加了async await函数的，但是..... 。

1. const Koa = require('koa')
2. const app = new Koa()
3. //第一个中间件
4. app.use((ctx, next) => {
5. console.log("第一个中间件", 1);
6. next()
7. console.log("第一个中间件", 2);
8. })
9. //第二个中间件
10. app.use((ctx, next) => {
11. console.log("第二个中间件", 3);
12. next()
13. console.log("第二个中间件", 4);
14. })
15. //第三个中间件
16. app.use(async(ctx, next) => {
17. console.log("第三个中间件", 5);
18. const axios = require("axios")
19. const res = await axios.get('http://www.baidu.com')
20. console.log(res);
21. console.log('发送了axios请求');
22. console.log("第三个中间件", 6);
23. })
24. app.listen(3000, () => {
25. console.log("Koa已经开启在http://localhost:3000");
26. })

我们自行打印这个结果，可以看到 。

中间省略.... 。

可以看到，我们虽然取回了这个res结果，但是它的打印顺序变了，也就是它遇到await后就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值.

但是这不符合我们想要的结果，我们想要的是它按照本来的顺序执行， 。

然后我们为了保证洋葱模型，我们应该如下改动，将前面的代码也添加async await用来控制情况在我们预期之内.

1. const Koa = require('koa')
2. const app = new Koa()
3. //第一个中间件
4. app.use(async(ctx, next) => {
5. console.log("第一个中间件", 1);
6. await next()
7. console.log("第一个中间件", 2);
8. })
9. //第二个中间件
10. app.use(async(ctx, next) => {
11. console.log("第二个中间件", 3);
12. await next()
13. console.log("第二个中间件", 4);
14. })
15. //第三个中间件
16. app.use(async(ctx, next) => {
17. console.log("第三个中间件", 5);
18. const axios = require("axios")
19. const res = await axios.get('http://www.baidu.com')
20. console.log('发送了axios请求');
21. console.log("第三个中间件", 6);
22. })
23. app.listen(3000, () => {
24. console.log("Koa已经开启在http://loclhost:3000");
25. })

运行代码我们可以看到 。

中间省略... 。

所以我们在写中间件函数的时候，一般都将中间件变成async await函数，这样就不会因为异步编程导致洋葱模型不可控以至于不合理 。

以上是我自己的理解，如果有更多的比如我说不清的，可以留言告诉我，我会好好去学习，大家一起把问题说出来互相学习，希望大家不要吝啬，求求各位大佬了 。

原文链接：https://mp.weixin.qq.com/s/1fpy1srk4GQA4c3gYZyVAQ 。

最后此篇关于使用异步编程保证 Koa 的洋葱模型的文章就讲到这里了,如果你想了解更多关于使用异步编程保证 Koa 的洋葱模型的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。