洋葱圈模型

最新推荐文章于 2024-03-18 13:57:24 发布

Qq@

最新推荐文章于 2024-03-18 13:57:24 发布

阅读量595

点赞数

分类专栏：前端杂记文章标签： javascript typescript 前端

本文链接：https://blog.csdn.net/weixin_28750673/article/details/124841175

版权

洋葱圈模型常用于JavaScript的koa、egg和umi-request等框架，通过类似洋葱层层执行的机制处理后置逻辑。该模型利用generator函数或Promise，确保每个中间件在执行过程中能正确地异步处理并等待内部层的完成。Koa和umi-request虽然实现方式略有不同，但都体现了洋葱圈模型的核心理念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

这个概念因koa框架兴起被熟知。利用generator函数（当时es8还没出，没法用async），实现中间件像洋葱圈一样执行的机制，实现后置处理逻辑。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38g9Wnjs-1652854006150)(/Users/yang/Downloads/68747470733a2f2f7261772e6769746875622e636f6d2f66656e676d6b322f6b6f612d67756964652f6d61737465722f6f6e696f6e2e706e67.png)]

应用

目前应用于koa、基于koa开发的egg，以及umi-request都使用了洋葱圈模型。

核心理念

如上图，在经过next时，会执行异步，接着执行下一个中间件。以此类推，最终每个中间件都会执行两次，外层执行完成依赖于内层都执行完毕。

koa、umi-request机制大致相同，依靠中间件数组+compose组合函数实现：前者存储中间件，后者决定执行中间件顺序。

伪代码如下：（详细代码可查阅源码）

class Union {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Qq@

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Koa核心—洋葱模型

weixin_44287796的博客

05-30

1671

洋葱模型 koa框架的业务流程是一个完全的异步编程模型，通过ctx上下文对象来贯穿http的上下游。那么我们最重要的就是理解洋葱模型。 const koa = require("Koa") const app = new koa() app.use((ctx,next)=>{ console.log(1) next() console.lo...

koa学习之洋葱圈模型学习

weixin_45746826的博客

11-12

631

直接上代码 // const add = (x, y) => x + y; // const square = z => z * z // // const compose = (fn1, fn2) => (...args) => fn2(fn1(...args)) // const compose = (...[first, ...other]) => (...args) => { // let ret = first(...args) // other.fo

参与评论您还未登录，请先登录后发表或查看评论

koa的洋葱圈模型

anshaobiao6449的博客

07-27

467

拿以下这段代码为例： const Koa = require('koa'); const app = new Koa(); // x-response-time app.use(async (ctx, next) => { const start = new Date(); await next(); const ms = new Date() -...

Koa2 中间件简易洋葱圈模型

sun

06-20

1476

整个核心功能在于 compose，这个用于压缩所有被 use 调用过的中间件之上。每一次 use 一个新的中间件的时候，将其 push 进对象里边的成员变量 middlewares 当中。所以重点就是要在 compose 当中进行递归，以合成最终要调用的那个函数，在监听到 request 请求的时候，将上下文对象 context 传入其中，最终完成整个所有中间件按照 洋葱圈 的模型去执行。既...

三言两语说透koa的洋葱模型

qq_36789311的博客

08-02

901

Compose函数可以将需要顺序执行的多个函数复合起来，后一个函数将前一个函数的执行结果作为参数。这里利用了函数递归的机制。dispatch函数接收当前中间件的索引i，如果i大于中间件数组长度，则执行next函数。compose接收一个中间件数组作为参数，执行数组中的中间件，返回一个可以执行所有中间件的函数。所有中间件的回调函数中，执行中间件函数的时候，递归调用dispatch，同时将索引+1，表示执行下一个中间件。每个中间件都可以捕获自己的错误，并且不会影响其他中间件的执行，这样对错误处理更加友好。

11-koa2洋葱圈模型.md

最新发布

03-31

本文件内容围绕Koa2的洋葱圈模型展开，Koa2是当前流行的Node.js框架之一，它采用现代JavaScript语言特性，提供了高性能且富有表现力的API。文档首先介绍了前端工程师技能广度的重要性，然后提到了移动端、HTTP网络...

JS手写实现洋葱圈模型

03-17

427

当我们执行第一个中间件时，首先输出1，然后调用next()，那么此时它会等第二个中间件执行完毕才会继续执行第一个中间件。然后执行第二个中间件，输出3，调用next()，执行第三中间件，输出5.此时第三个中间件执行完毕，返回到第二个中间件，输出4，然后返回到第一个中间件。

理解Koa2洋葱圈模型：前端面试重点解析

"本文主要探讨了前端面试中的一个重要知识点——Koa2的洋葱圈模型，这是在Node.js环境中，特别是与服务端相关的面试中经常会被问到的一个概念。Koa2是一个基于Node.js的Web应用框架，其设计的核心理念就是洋葱圈模型...

详细解释下什么是koa的洋葱圈模型

03-24

Koa的洋葱圈模型指的是一种中间件机制，它的执行顺序类似于一个洋葱圈，从外到内再从内到外，每一层都可以对请求进行修改、拦截或增强，直到最内层执行完毕，再按相反顺序回到最外层，将结果返回给客户端。...

洋葱圈模型js实现

m0_47195133的博客

03-18

769

洋葱圈模型js实现

《Node.js》中间件和洋葱圈模型

有趣的小良的博客

04-27

420

顾名思义, 中间件就是在什么的中间，在请求和响应中间的处理程序就叫中间件，其本质是一个函数。有时候从请求到响应的业务比较复杂, 将这些复杂的业务拆开成一个个功能独立的函数, 就是中间件对于处理请求来说，在响应发出之前，可以在请求和响应之间做一些操作，并且可以将这个处理结果传递给下一个函数继续处理中间件函数，帮助拆解主程序的业务逻辑，并且每一个的中间件函数处理的结果都会传递给下一个中间件函数。就好比工厂里流水线工人清洗一个箱子 : 第一个人清洗侧面，第二个人清洗底面，第三个人清洗顶面，。。。

实现一个简易的洋葱圈中间件

lzj12530的博客

05-27

485

koa带来了洋葱圈模型，这个模型可以用于koa（eggjs）的中间件. axios可以利用洋葱圈模型实现拦截器，合并请求拦截器与响应拦截器。 ES6生成器生成器是 ECMAScript 6 新增的一个极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的能力。这种新能力具有深远的影响，比如，使用生成器可以自定义迭代器和实现协程。 — 节选自《JavaScript高级程序设计（第4版）》 洋葱圈的实现得益于生成器，下面是利用生成器实现的简易中间件 const stack = [ function (.

Koa中间件机制的洋葱圈模型

切图小弟

03-25

1109

const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { console.log(1); await next(); console.log(6); }); app.use(async (ctx, next) => { console.log(2...

koa2日志管理与中间件机制和洋葱圈模型

domino~~的博客

09-28

614

koa2日志管理与中间件机制和洋葱圈模型 koa2日志管理在日志管理部分，需要去创建一个单独的文件夹去储存日志，在这个文件夹中有不同的文件去储存不同的日志。然后在koa2中去管理日志需要去借助两个第三方工具库，morgan和koa-logger。由于在存储文件过程...

node.js洋葱圈模型介绍及中间件的简单实现

weixin_47077674的博客

09-28

989

中间件前言最近在学习node.js过程中，发现到实际项目中，有很多琐碎的细节工作要完成，对于开发者而已，开发者只需要注重其中的业务开发上，不用接触到那么多细节的处理，以达到提升开发效率的目的，这时候我们就要引入中间件了。含义早先前的中间件定义是在操作系统上为应用软件提供服务的计算机软件，它既不是操作系统，也不是应用软件，只是为了应用软件更好，更方便地使用底层服务。如今node.js中中间件的含义，就是为了封装HTTP请求中细节处理的中间件，就是一种功能的封装方式，使开发者可以脱离这部分细节，专注在

koa洋葱圈模型原理及应用

zhengxiao111的博客

02-16

580

next在dispath传入next函数实参，从而通过下一个函数索引调用下一个函数。所以进行函数封装时，可以通过函数参数简化外层函数代码量，同时通过条件判断，确认是否执行该传入的逻辑，即代码逻辑叠加。3、第一个中间件调用在compose中使用dispatch(0),后面的中间件函数调用，直接是通过传入的next()里直接dispatch(下一个）1、闭包里定义局部函数dispath函数，负责每个中间件传入next实参函数。2、next()函数中，通过中间件数组索引，定位到下一个中间件。

koa2 一网打尽（基本使用，洋葱圈，中间件机制和模拟，源码分析，核心点，生态）

大灰狼的小绵羊哥哥的博客

11-29

1556

原文https://juejin.im/entry/5bfbe5a76fb9a049cb186cfa/detail koa homepage 优秀的下一代 web 开发框架。 Koa 应用程序不是 HTTP 服务器的1对1展现。可以将一个或多个 Koa 应用程序安装在一起以形成具有单个HTTP服务器的更大应用程序。基础使用快速搭建简易 koa server 服务 koa 搭建一...

Koa洋葱圈模型源码浅析（`await next()`为什么能够形成洋葱圈模型？）

あなたの可愛い41

04-14

1267

Koa洋葱圈模型源码浅析,你将了解到： 1.`await next()`为什么能够形成洋葱圈模型？ 2.为什么中间件可以使用ctx.state传递信息

【爆炒洋葱圈】学习Unity3D时对事件驱动模式的理解

爆炒洋葱圈

08-06

1957

图灵杯是我们学院一年内比较重大的活动于是图灵杯的游戏程序设计也是至关重要的面对像图灵杯这样较大的项目需要一个比较好的项目设计模式上网搜索发现事件驱动模式（或者说观察者模式亦或是发布/订阅模式）是比较适合Unity3D的于是写下这么一篇学习心得以供自己后面和后来人参考如有纰漏望耐心指教何为事件驱动模式原本以为事件驱动模式是非常简单的但是却发现自...