web前端技术分享：koa中间件是如何实现的？

2024-04-23 23:43:33

在前端开发过程中我们可能会使用到koa中间件，但很多同学却不知道它是如何实现的，下面小千就来给大家介绍一下这个koa中间件（洋葱模型）。

一、问题分析

async await是promise的语法糖，await后面跟一个promise，所以上面的代码可以写成：

改成这样更好理解一些，所以流程控制的核心在于next的实现。next要求调用队列中下一个middleware，当达到最后一个的时候resolve。这样最后面的promise先resolve，一直到第一个，这样就是洋葱模型的顺序了。

![

二、实现

](https://img-blog.csdnimg.cn/05a1e5cb87b54b71aa10a0a76f137257.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY55qE5bCP5YKy5aiH,size_12,color_FFFFFF,t_70,g_se,x_16)

koa-compose的实现是这样的：

我们把一些参数检查的非核心逻辑去掉了，实现代码就上面那些。每次传入的next都是调用下一个middleware，这样是一个递归的过程，结束条件是最后一个middleware的next是用户传入的。

这里面有一些亮点：

1.这是一种尾递归的形式，尾递归的特点是最后返回的值是一个递归的函数调用，这样执行完就会在调用栈中销毁，不会占据调用栈.

2.返回的是一个Promise.resolve包装之后的调用，而不是同步的调用，所以这是一个异步递归，异步递归比同步递归的好处是可以被打断，如果中间有一些优先级更高的微任务，那么可以先执行别的微任务

3.compose是函数复合，把n个middleware复合成一个，参数依然是context和next，这种复合之后依然是一个middleware，还可以继续进行复合。

三、总结

Koa 中间件的实现原理，也就是洋葱模型的实现原理，核心在于next的实现。next需要依次调用下一个middleware，当到最后一个的时候结束，这样后面middleware的promise先resolve，然后直到第一个，这样的流程也就是洋葱模型的流程了。

实现的时候还有一些细节，一个是递归最好做成尾递归的形式，而是用异步递归而不是同步递归，第三就是形式上用函数复合的形式，这样复合之后的中间件还可以继续复合。

已上就是koa中间件的实现原理和案例介绍了，相信大家看完之后就能明白了。

本文来自千锋教育，转载请注明出处。

web前端技术分享：koa中间件是如何实现的？相关推荐

好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
web前端技术分享：详解模块化require 和 import的区别
在前端开发中,我们可以使用很多模块化的库来帮助我们更好的实现效果,有一些库的功能类似很多同学就不知道该如何选择,比如require和import,今天小千就给大家介绍一下两者的区别. 一.区别 1.r ...
Web前端技术分享：img标签下方出现空隙的问题解决方案
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图代码如下: 为什么会出现这种情况呢? 因为img是一种类似text的标签元素,在结束的 ...
Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...
web前端技术分享：常用JavaScript框架有哪些？
常用JavaScript框架有哪些?对于前端开发工作者来说,JavaScript绝对是绕不开的一个点,可以所前端的大部分动态交互都是由JS完成,所以学好JavaScript基本上你就成功了一半.下面小 ...
Web前端技术分享之前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来就给大 ...

最新文章

热门文章