详解KOA2如何手写中间件(装饰器模式)

2023-09-07 16:25:04 55

前言

Koa2.x版本是当下最流行的NodeJS框架，Koa2.0的源码特别精简，不像Express封装的功能那么多，所以大部分的功能都是由Koa开发团队（同Express是一家出品）和社区贡献者针对Koa对NodeJS的封装特性实现的中间件来提供的，用法非常简单，就是引入中间件，并调用Koa的use方法使用在对应的位置，这样就可以通过在内部操作ctx实现一些功能，我们接下来就讨论常用中间件的实现原理以及我们应该如何开发一个Koa中间件供自己和别人使用。

Koa的洋葱模型介绍

我们本次不对洋葱模型的实现原理进行过多的刨析，主要根据API的使用方式及洋葱模型分析中间件是如何工作的。

洋葱模型特点

//引入Koa
constKoa=require("koa");

//创建服务
constapp=newKoa();

app.use(async(ctx,next)=>{
console.log(1);
awaitnext();
console.log(2);
});

app.use(async(ctx,next)=>{
console.log(3);
awaitnext();
console.log(4);
});

app.use(async(ctx,next)=>{
console.log(5);
awaitnext();
console.log(6);
});

//监听服务
app.listen(3000);

//1
//3
//5
//6
//4
//2

我们知道Koa的use方法是支持异步的，所以为了保证正常的按照洋葱模型的执行顺序执行代码，需要在调用next的时候让代码等待，等待异步结束后再继续向下执行，所以我们在Koa中都是建议使用async/await的，引入的中间件都是在use方法中调用，由此我们可以分析出每一个Koa的中间件都是返回一个async函数的。

koa-bodyparser中间件模拟

想要分析koa-bodyparser的原理首先需要知道用法和作用，koa-bodyparser中间件是将我们的post请求和表单提交的查询字符串转换成对象，并挂在ctx.request.body上，方便我们在其他中间件或接口处取值，使用前需提前安装。

npminstallkoakoa-bodyparser

koa-bodyparser具体用法如下：

koa-bodyparser的用法

constKoa=require("koa");
constbodyParser=require("koa-bodyparser");

constapp=newKoa();

//使用中间件
app.use(bodyParser());

app.use(async(ctx,next)=>{
if(ctx.path==="/"&&ctx.method==="POST"){
//使用中间件后ctx.request.body属性自动加上了post请求的数据
console.log(ctx.request.body);
}
});

app.listen(3000);

根据用法我们可以看出koa-bodyparser中间件引入的其实是一个函数，我们把它放在了use中执行，根据Koa的特点，我们推断出koa-bodyparser的函数执行后应该给我们返回了一个async函数，下面是我们模拟实现的代码。

文件：my-koa-bodyparser.js

constquerystring=require("querystring");

module.exports=functionbodyParser(){
returnasync(ctx,next)=>{
awaitnewPromise((resolve,reject)=>{
//存储数据的数组
letdataArr=[];

//接收数据
ctx.req.on("data",data=>dataArr.push(data));

//整合数据并使用Promise成功
ctx.req.on("end",()=>{
//获取请求数据的类型json或表单
letcontentType=ctx.get("Content-Type");

//获取数据Buffer格式
letdata=Buffer.concat(dataArr).toString();

if(contentType==="application/x-www-form-urlencoded"){
//如果是表单提交，则将查询字符串转换成对象赋值给ctx.request.body
ctx.request.body=querystring.parse(data);
}elseif(contentType==="applaction/json"){
//如果是json，则将字符串格式的对象转换成对象赋值给ctx.request.body
ctx.request.body=JSON.parse(data);
}

//执行成功的回调
resolve();
});
});

//继续向下执行
awaitnext();
};
};

在上面代码中由几点是需要我们注意的，即next的调用以及为什么通过流接收数据、处理数据和将数据挂在ctx.request.body要在Promise中进行。

首先是next的调用，我们知道Koa的next执行，其实就是在执行下一个中间件的函数，即下一个use中的async函数，为了保证后面的异步代码执行完毕后再继续执行当前的代码，所以我们需要使用await进行等待，其次就是数据从接收到挂在ctx.request.body都在Promise中执行，是因为在接收数据的操作是异步的，整个处理数据的过程需要等待异步完成后，再把数据挂在ctx.request.body上，可以保证我们在下一个use的async函数中可以在ctx.request.body上拿到数据，所以我们使用await等待一个Promise成功后再执行next。

koa-better-body中间件模拟

koa-bodyparser在处理表单提交时还是显得有一点弱，因为不支持文件上传，而koa-better-body则弥补了这个不足，但是koa-better-body为Koa1.x版本的中间件，Koa1.x的中间件都是使用Generator函数实现的，我们需要使用koa-convert将koa-better-body转化成Koa2.x的中间件。

npminstallkoakoa-better-bodykoa-convertpathuuid

koa-better-body具体用法如下：

koa-better-body的用法

constKoa=require("koa");
constbetterBody=require("koa-better-body");
constconvert=require("koa-convert");//将koa1.0中间转化成koa2.0中间件
constpath=require("path");
constfs=require("fs");
constuuid=require("uuid/v1");//生成随机串

constapp=newKoa();

//将koa-better-body中间件从koa1.0转化成koa2.0，并使用中间件
app.use(convert(betterBody({
uploadDir:path.resolve(__dirname,"upload")
})));

app.use(async(ctx,next)=>{
if(ctx.path==="/"&&ctx.method==="POST"){
//使用中间件后ctx.request.fields属性自动加上了post请求的文件数据
console.log(ctx.request.fields);

//将文件重命名
letimgPath=ctx.request.fields.avatar[0].path;
letnewPath=path.resolve(__dirname,uuid());
fs.rename(imgPath,newPath);
}
});

app.listen(3000);

上面代码中koa-better-body的主要功能就是将表单上传的文件存入本地指定的文件夹下，并将文件流对象挂在了ctx.request.fields属性上，我们接下来就模拟koa-better-body的功能实现一版基于Koa2.x处理文件上传的中间件。

文件：my-koa-better-body.js

constfs=require("fs");
constuuid=require("uuid/v1");
constpath=require("path");

//给Buffer扩展split方法预备后面使用
Buffer.prototype.split=function(sep){
letlen=Buffer.from(sep).length;//分隔符所占的字节数
letresult=[];//返回的数组
letstart=0;//查找Buffer的起始位置
letoffset=0;//偏移量

//循环查找分隔符
while((offset=this.indexOf(sep,start))!==-1){
//将分隔符之前的部分截取出来存入
result.push(this.slice(start,offset));
start=offset+len;
}

//处理剩下的部分
result.push(this.slice(start));

//返回结果
returnresult;
}

module.exports=function(options){
returnasync(ctx,next)=>{
awaitnewPromise((resolve,reject)=>{
letdataArr=[];//存储读取的数据

//读取数据
ctx.req.on("data",data=>dataArr.push(data));

ctx.req.on("end",()=>{
//取到请求体每段的分割线字符串
letbondery=`--${ctx.get("content-Type").split("=")[1]}`;

//获取不同系统的换行符
letlineBreak=process.platform==="win32"?"\r\n":"\n";

//非文件类型数据的最终返回结果
letfields={};

//分隔的buffer去掉没用的头和尾即开头的''和末尾的'--'
dataArr=dataArr.split(bondery).slice(1,-1);

//循环处理dataArr中每一段Buffer的内容
dataArr.forEach(lines=>{
//对于普通值，信息由包含键名的行+两个换行+数据值+换行组成
//对于文件，信息由包含filename的行+两个换行+文件内容+换行组成
let[head,tail]=lines.split(`${lineBreak}${lineBreak}`);

//判断是否是文件，如果是文件则创建文件并写入，如果是普通值则存入fields对象中
if(head.includes("filename")){
//防止文件内容含有换行而被分割，应重新截取内容并去掉最后的换行
lettail=lines.slice(head.length+2*lineBreak.length,-lineBreak.length);

//创建可写流并指定写入的路径：绝对路径+指定文件夹+随机文件名，最后写入文件
fs.createWriteStream(path.join(__dirname,options.uploadDir,uuid())).end(tail);
}else{
//是普通值取出键名
letkey=head.match(/name="(\w+)"/)[1];

//将key设置给fieldstail去掉末尾换行后的内容
fields[key]=tail.toString("utf8").slice(0,-lineBreak.length);
}
});

//将处理好的fields对象挂在ctx.request.fields上，并完成Promise
ctx.request.fields=fields;
resolve();
});
});

//向下执行
awaitnext();
}
}

上面的内容逻辑可以通过代码注释来理解，就是模拟koa-better-body的功能逻辑，我们主要的关心点在于中间件实现的方式，上面功能实现的异步操作依然是读取数据，为了等待数据处理结束仍然在Promise中执行，并使用await等待，Promise执行成功调用next。

koa-views中间件模拟

Node模板是我们经常使用的工具用来在服务端帮我们渲染页面，模板的种类繁多，因此出现了koa-view中间件，帮我们来兼容这些模板，先安装依赖的模块。

npminstallkoakoa-viewsejs

下面是一个ejs的模板文件：

文件：index.ejs





ejs


<%=name%>
<%=age%>

<%if(name=="panda"){%>
panda
<%}else{%>
shen
<%}%>

<%arr.forEach(item=>{%>
<%=item%>
<%})%>

koa-views具体用法如下：

koa-views的用法

constKoa=require("koa");
constviews=require("koa-views");
constpath=require("path");

constapp=newKoa();

//使用中间件
app.use(views(path.resolve(__dirname,"views"),{
extension:"ejs"
}));

app.use(async(ctx,next)=>{
awaitctx.render("index",{name:"panda",age:20,arr:[1,2,3]});
});

app.listen(3000);

可以看出我们使用了koa-views中间件后，让ctx上多了render方法帮助我们实现对模板的渲染和响应页面，就和直接使用ejs自带的render方法一样，并且从用法可以看出render方法是异步执行的，所以需要使用await进行等待，接下来我们就来模拟实现一版简单的koa-views中间件。

文件：my-koa-views.js

constfs=require("fs");
constpath=require("path");
const{promisify}=require("util");

//将读取文件方法转换成Promise
constreadFile=promisify(fs.radFile);

//到处中间件
module.exports=function(dir,options){
returnasync(ctx,next)=>{
//动态引入模板依赖模块
constview=require(options.extension);

ctx.render=async(filename,data)=>{
//异步读取文件内容
lettmpl=awaitreadFile(path.join(dir,`${filename}.${options.extension}`),"utf8");

//将模板渲染并返回页面字符串
letpageStr=view.render(tmpl,data);

//设置响应类型并响应页面
ctx.set("Content-Type","text/html;charset=utf8");
ctx.body=pageStr;
}

//继续向下执行
awaitnext();
}
}

挂在ctx上的render方法之所以是异步执行的是因为内部读取模板文件是异步执行的，需要等待，所以render方法为async函数，在中间件内部动态引入了我们使的用模板，如ejs，并在ctx.render内部使用对应的render方法获取替换数据后的页面字符串，并以html的类型响应。

koa-static中间件模拟

下面是koa-static中间件的用法，代码使用的依赖如下，使用前需安装。

npminstallkoakoa-staticmime

koa-static具体用法如下：

koa-static的用法

constKoa=require("koa");
conststatic=require("koa-static");
constpath=require("path");

constapp=newKoa();

app.use(static(path.resolve(__dirname,"public")));

app.use(async(ctx,next)=>{
ctx.body="helloworld";
});

app.listen(3000);

通过使用和分析，我们知道了koa-static中间件的作用是在服务器接到请求时，帮我们处理静态文件，如果我们直接访问文件名的时候，会查找这个文件并直接响应，如果没有这个文件路径会当作文件夹，并查找文件夹下的index.html，如果存在则直接响应，如果不存在则交给其他中间件处理。

文件：my-koa-static.js

constfs=require("fs");
constpath=require("path");
constmime=require("mime");
const{promisify}=require("util");

//将stat和access转换成Promise
conststat=promisify(fs.stat);
constaccess=promisify(fs.access)

module.exports=function(dir){
returnasync(ctx,next)=>{
//将访问的路由处理成绝对路径，这里要使用join因为有可能是/
letrealPath=path.join(dir,ctx.path);

try{
//获取stat对象
letstatObj=awaitstat(realPath);

//如果是文件，则设置文件类型并直接响应内容，否则当作文件夹寻找index.html
if(statObj.isFile()){
ctx.set("Content-Type",`${mime.getType()};charset=utf8`);
ctx.body=fs.createReadStream(realPath);
}else{
letfilename=path.join(realPath,"index.html");

//如果不存在该文件则执行catch中的next交给其他中间件处理
awaitaccess(filename);

//存在设置文件类型并响应内容
ctx.set("Content-Type","text/html;charset=utf8");
ctx.body=fs.createReadStream(filename);
}
}catch(e){
awaitnext();
}
}
}

上面的逻辑中需要检测路径是否存在，由于我们导出的函数都是async函数，所以我们将stat和access转化成了Promise，并用try...catch进行捕获，在路径不合法时调用next交给其他中间件处理。

koa-router中间件模拟

在Express框架中，路由是被内置在了框架内部，而Koa中没有内置，是使用koa-router中间件来实现的，使用前需要安装。

npminstallkoakoa-router

koa-router功能非常强大，下面我们只是简单的使用，并且根据使用的功能进行模拟。

koa-router的简单用法

constKoa=require("Koa");
constRouter=require("koa-router");

constapp=newKoa();
constrouter=newRouter();

router.get("/panda",(ctx,next)=>{
ctx.body="panda";
});

router.get("/panda",(ctx,next)=>{
ctx.body="pandashen";
});

router.get("/shen",(ctx,next)=>{
ctx.body="shen";
})

//调用路由中间件
app.use(router.routes());

app.listen(3000);

从上面看出koa-router导出的是一个类，使用时需要创建一个实例，并且调用实例的routes方法将该方法返回的async函数进行连接，但是在匹配路由的时候，会根据路由get方法中的路径进行匹配，并串行执行内部的回调函数，当所有回调函数执行完毕之后会执行整个Koa串行的next，原理同其他中间件，我下面来针对上面使用的功能简易实现。

文件：my-koa-router.js

//控制每一个路由层的类
classLayer{
constructor(path,cb){
this.path=path;
this.cb=cb;
}
match(path){
//地址的路由和当前配置路由相等返回true，否则返回false
returnpath===this.path;
}
}

//路由的类
classRouter{
constructor(){
//存放每个路由对象的数组，{path:/xxx,fn:cb}
this.layers=[];
}
get(path,cb){
//将路由对象存入数组中
this.layers.push(newLayer(path,cb));
}
compose(ctx,next,handlers){
//将匹配的路由函数串联执行
functiondispatch(index){
//如果当前index个数大于了存储路由对象的长度，则执行Koa的next方法
if(index>=handlers.length)returnnext();

//否则调用取出的路由对象的回调执行，并传入一个函数，在传入的函数中递归dispatch(index+1)
//目的是为了执行下一个路由对象上的回调函数
handlers[index].cb(ctx,()=>dispatch(index+1));
}

//第一次执行路由对象的回调函数
dispatch(0);
}
routes(){
returnasync(ctx,next){//当前next是Koa自己的next，即Koa其他的中间件
//筛选出路径相同的路由
lethandlers=this.layers.filter(layer=>layer.match(ctx.path));
this.compose(ctx,next,handlers);
}
}
}

在上面我们创建了一个Router类，定义了get方法，当然还有post等，我们只实现get意思一下，get内为逻辑为将调用get方法的参数函数和路由字符串共同构建成对象存入了数组layers，所以我们创建了专门构造路由对象的类Layer，方便扩展，在路由匹配时我们可以根据ctx.path拿到路由字符串，并通过该路由过滤调数组中与路由不匹配的路由对象，调用compose方法将过滤后的数组作为参数handlers传入，串行执行路由对象上的回调函数。

compose这个方法的实现思想非常的重要，在Koa源码中用于串联中间件，在React源码中用于串联redux的promise、thunk和logger等模块，我们的实现是一个简版，并没有兼容异步，主要思想是递归dispatch函数，每次取出数组中下一个路由对象的回调函数执行，直到所有匹配的路由的回调函数都执行完，执行Koa的下一个中间件next，注意此处的next不同于数组中回调函数的参数next，数组中路由对象回调函数的next代表下一个匹配路由的回调。

总结

上面我们分析和模拟了一些中间件，其实我们会理解Koa和Express相比较的优势是没有那么繁重，开发使用方便，需要的功能都可以用对应的中间件来实现，使用中间件可以给我们带来一些好处，比如能将我们处理好的数据和新方法挂载在ctx上，方便后面use传入的回调函数中使用，也可以帮我们处理一些公共逻辑，不至于在每一个use的回调中都去处理，大大减少了冗余代码，由此看来其实给Koa使用中间件的过程就是一个典型的“装饰器”模式，在通过上面的分析之后相信大家也了解了Koa的“洋葱模型”和异步特点，知道该如何开发自己的中间件了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解KOA2如何手写中间件(装饰器模式)

热门推荐

随机推荐