[{"data":1,"prerenderedAt":125},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fnode-simple-onion-model-implementation":3,"surround:\u002Fposts\u002F2024\u002Fnode-simple-onion-model-implementation":114},{"id":4,"title":5,"body":6,"canonical":82,"categories":83,"date":85,"description":86,"draft":87,"extension":88,"image":82,"meta":89,"navigation":96,"path":97,"permalink":82,"readingTime":98,"recommend":82,"references":82,"seo":103,"sitemap":104,"stem":108,"tags":109,"type":82,"updated":85,"__hash__":113},"content\u002Fposts\u002F2024\u002Fnode-simple-onion-model-implementation.md","node-简易洋葱模型实现",{"type":7,"value":8,"toc":76},"minimark",[9,16,21,24,31,34,37,48,51,56,59,67,70],[10,11,12],"p",{},[13,14,15],"strong",{},"就像我们睡觉一样，盖了三床被子，要从外面一层一层展开；躺进去后，再一层一层盖上一样。",[17,18,20],"h2",{"id":19},"koa-中的洋葱圈模型","koa 中的洋葱圈模型",[10,22,23],{},"在koa中，中间件是洋葱圈模型。什么是洋葱圈模型呢？",[10,25,26],{},[27,28],"img",{"alt":29,"src":30},"洋葱圈模型","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679adf13e53e2-78.webp",[10,32,33],{},"每一层都是一个中间件，先从外到里执行next前的处理，再由中心向外部执行next之后的处理。每一层都有两次执行时机。",[10,35,36],{},"我们先使用koa来看一下中间件执行的时机及过程",[38,39,45],"pre",{"className":40,"code":42,"language":43,"meta":44},[41],"language-js","const Koa = require('koa')\n\nconst app = new Koa()\n\napp.use((ctx, next) => {\n    console.log('中间件1 -- next之前')\n    next()\n    console.log('中间件1 -- next之后')\n})\n\napp.use((ctx, next) => {\n    console.log('中间件2 -- next之前')\n    next()\n    console.log('中间件2 -- next之后')\n})\n\nconst port = 3000\napp.listen(port, () => {\n    console.log(`http:\u002F\u002Flocalhost:${port}`)\n})\n","js","",[46,47,42],"code",{"__ignoreMap":44},[10,49,50],{},"执行如图所示",[10,52,53],{},[27,54],{"alt":44,"src":55},"https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679adf1371a9c-78.webp",[10,57,58],{},"打印结果如下",[38,60,65],{"className":61,"code":63,"language":64},[62],"language-text","中间件1 -- next之前\n中间件2 -- next之前\n中间件2 -- next之后\n中间件1 -- next之后\n","text",[46,66,63],{"__ignoreMap":44},[17,68,69],{"id":69},"简易的洋葱圈模型实现",[38,71,74],{"className":72,"code":73,"language":43,"meta":44},[41],"const { createServer } = require(\"node:http\")\n\nclass Koa {\n    handlers = []\n    ctx = {}\n    use(handler) {\n        if (typeof handler !== \"function\") {\n            throw new TypeError(\"middleware is must be a function\")\n        }\n\n        this.handlers.push(handler)\n    }\n\n    _execute() {\n        if (this.handlers.length === 0)\n            return\n        const first = this.handlers.shift()\n\n        first(this.ctx, () => {\n            this._execute()\n        })\n    }\n\n    listen(port, callback) {\n        const app = createServer((req, res) => {\n            this._execute()\n\n            res.writeHead(200, { \"Content-type\": \"application\u002Fjson\" })\n            res.end(\n                JSON.stringify({\n                    status: 200,\n                    message: \"hello my koa\",\n                })\n            )\n        })\n\n        app.listen(port, typeof callback === \"function\" ? callback : null)\n    }\n}\n\nconst app = new Koa()\n\napp.use((ctx, next) => {\n    console.log(\"中间件1 -- next之前\")\n    next()\n    console.log(\"中间件1 -- next之后\")\n})\n\napp.use((ctx, next) => {\n    console.log(\"中间件2 -- next之前\")\n    next()\n    console.log(\"中间件2 -- next之后\")\n})\n\nconst port = 3000\napp.listen(port, () => {\n    console.log(`http:\u002F\u002Flocalhost:${port}`)\n})\n",[46,75,73],{"__ignoreMap":44},{"title":44,"searchDepth":77,"depth":77,"links":78},4,[79,81],{"id":19,"depth":80,"text":20},2,{"id":69,"depth":80,"text":69},null,[84],"代码","2024-10-07 15:15:22","仿照koa实现一个简易的洋葱模型",false,"md",{"excerpt":90},{"type":7,"value":91},[92],[10,93,94],{},[13,95,15],{},true,"\u002Fposts\u002F2024\u002Fnode-simple-onion-model-implementation",{"text":99,"minutes":100,"time":101,"words":102},"3 min read",2.025,121500,405,{"title":5,"description":86},{"loc":97,"images":105},[106,107],{"loc":30},{"loc":55},"posts\u002F2024\u002Fnode-simple-onion-model-implementation",[110,111,112],"JavaScript","node","koa","yOLGualVUVRkScYXt4iAVKcqE-xHXaXeB7VTKWWvQcE",[115,120],{"title":116,"path":117,"stem":118,"date":119,"type":82,"children":-1},"Nuxt报错解决","\u002Fposts\u002F2024\u002Fnuxt3-server-error","posts\u002F2024\u002Fnuxt3-server-error","2024-09-09 15:33:19",{"title":121,"path":122,"stem":123,"date":124,"type":82,"children":-1},"Http Status Codes 释义","\u002Fposts\u002F2024\u002Fhttp-status-codes","posts\u002F2024\u002FHttp-Status-Codes","2024-10-23 21:18:21",1789642591441]