189 8069 5689
小编给大家分享一下KOA2手写中间件的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联是专业的容县网站建设公司，容县接单;提供成都做网站、网站制作、成都外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行容县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
前言
Koa 2.x 版本是当下最流行的 NodeJS 框架， Koa 2.0 的源码特别精简，不像 Express 封装的功能那么多，所以大部分的功能都是由 Koa 开发团队（同 Express 是一家出品）和社区贡献者针对 Koa 对 NodeJS 的封装特性实现的中间件来提供的，用法非常简单，就是引入中间件，并调用 Koa 的 use 方法使用在对应的位置，这样就可以通过在内部操作 ctx 实现一些功能，我们接下来就讨论常用中间件的实现原理以及我们应该如何开发一个 Koa 中间件供自己和别人使用。
Koa 的洋葱模型介绍
我们本次不对洋葱模型的实现原理进行过多的刨析，主要根据 API 的使用方式及洋葱模型分析中间件是如何工作的。
洋葱模型特点
// 引入 Koa
const Koa = require("koa");
// 创建服务
const app = new Koa();
app.use(async (ctx, next) => {
console.log(1);
await next();
console.log(2);
});
app.use(async (ctx, next) => {
console.log(3);
await next();
console.log(4);
});
app.use(async (ctx, next) => {
console.log(5);
await next();
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 上，方便我们在其他中间件或接口处取值，使用前需提前安装。
npm install koa koa-bodyparser
koa-bodyparser 具体用法如下：
koa-bodyparser 的用法
const Koa = require("koa");
const bodyParser = require("koa-bodyparser");
const app = new Koa();
// 使用中间件
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
const querystring = require("querystring");
module.exports = function bodyParser() {
return async (ctx, next) => {
await new Promise((resolve, reject) => {
// 存储数据的数组
let dataArr = [];
// 接收数据
ctx.req.on("data", data => dataArr.push(data));
// 整合数据并使用 Promise 成功
ctx.req.on("end", () => {
// 获取请求数据的类型 json 或表单
let contentType = ctx.get("Content-Type");
// 获取数据 Buffer 格式
let data = Buffer.concat(dataArr).toString();
if (contentType === "application/x-www-form-urlencoded") {
// 如果是表单提交，则将查询字符串转换成对象赋值给 ctx.request.body
ctx.request.body = querystring.parse(data);
} else if (contentType === "applaction/json") {
// 如果是 json，则将字符串格式的对象转换成对象赋值给 ctx.request.body
ctx.request.body = JSON.parse(data);
}
// 执行成功的回调
resolve();
});
});
// 继续向下执行
await next();
};
};在上面代码中由几点是需要我们注意的，即 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 为 Koa 1.x 版本的中间件， Koa 1.x 的中间件都是使用 Generator 函数实现的，我们需要使用 koa-convert 将 koa-better-body 转化成 Koa 2.x 的中间件。
npm install koa koa-better-body koa-convert path uuid
koa-better-body 具体用法如下：
koa-better-body 的用法
const Koa = require("koa");
const betterBody = require("koa-better-body");
const convert = require("koa-convert"); // 将 koa 1.0 中间转化成 koa 2.0 中间件
const path = require("path");
const fs = require("fs");
const uuid = require("uuid/v1"); // 生成随机串
const app = new Koa();
// 将 koa-better-body 中间件从 koa 1.0 转化成 koa 2.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);
// 将文件重命名
let imgPath = ctx.request.fields.avatar[0].path;
let newPath = path.resolve(__dirname, uuid());
fs.rename(imgPath, newPath);
}
});
app.listen(3000);上面代码中 koa-better-body 的主要功能就是将表单上传的文件存入本地指定的文件夹下，并将文件流对象挂在了 ctx.request.fields 属性上，我们接下来就模拟 koa-better-body 的功能实现一版基于 Koa 2.x 处理文件上传的中间件。
文件：my-koa-better-body.js
const fs = require("fs");
const uuid = require("uuid/v1");
const path = require("path");
// 给 Buffer 扩展 split 方法预备后面使用
Buffer.prototype.split = function (sep) {
let len = Buffer.from(sep).length; // 分隔符所占的字节数
let result = []; // 返回的数组
let start = 0; // 查找 Buffer 的起始位置
let offset = 0; // 偏移量
// 循环查找分隔符
while ((offset = this.indexOf(sep, start)) !== -1) {
// 将分隔符之前的部分截取出来存入
result.push(this.slice(start, offset));
start = offset + len;
}
// 处理剩下的部分
result.push(this.slice(start));
// 返回结果
return result;
}
module.exports = function (options) {
return async (ctx, next) => {
await new Promise((resolve, reject) => {
let dataArr = []; // 存储读取的数据
// 读取数据
ctx.req.on("data", data => dataArr.push(data));
ctx.req.on("end", () => {
// 取到请求体每段的分割线字符串
let bondery = `--${ctx.get("content-Type").split("=")[1]}`;
// 获取不同系统的换行符
let lineBreak = process.platform === "win32" ? "\r\n" : "\n";
// 非文件类型数据的最终返回结果
let fields = {};
// 分隔的 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")) {
// 防止文件内容含有换行而被分割，应重新截取内容并去掉最后的换行
let tail = lines.slice(head.length + 2 * lineBreak.length, -lineBreak.length);
// 创建可写流并指定写入的路径：绝对路径 + 指定文件夹 + 随机文件名，最后写入文件
fs.createWriteStream(path.join(__dirname, options.uploadDir, uuid())).end(tail);
} else {
// 是普通值取出键名
let key = head.match(/name="(\w+)"/)[1];
// 将 key 设置给 fields tail 去掉末尾换行后的内容
fields[key] = tail.toString("utf8").slice(0, -lineBreak.length);
}
});
// 将处理好的 fields 对象挂在 ctx.request.fields 上，并完成 Promise
ctx.request.fields = fields;
resolve();
});
});
// 向下执行
await next();
}
}上面的内容逻辑可以通过代码注释来理解，就是模拟 koa-better-body 的功能逻辑，我们主要的关心点在于中间件实现的方式，上面功能实现的异步操作依然是读取数据，为了等待数据处理结束仍然在 Promise 中执行，并使用 await 等待，Promise 执行成功调用 next 。
koa-views 中间件模拟
Node 模板是我们经常使用的工具用来在服务端帮我们渲染页面，模板的种类繁多，因此出现了 koa-view 中间件，帮我们来兼容这些模板，先安装依赖的模块。
npm install koa koa-views ejs
下面是一个 ejs 的模板文件：
文件：index.ejs