沈阳cms模板建站,wordpress图片打叉,wordpress15天教,网站建设规划书样板#x1f4cc;
Koa -- 基于 Node.js 平台的下一代 web 开发框架。
上面的那句话是Koa官方讲的。首先Koa是一个新的web框架#xff0c;由Express幕后的原班人马打造。我们都知道现在市面上很多的Node 服务框架或者是功能#xff0c;都是基于Express来进行开发的#xff0c;…
Koa -- 基于 Node.js 平台的下一代 web 开发框架。
上面的那句话是Koa官方讲的。首先Koa是一个新的web框架由Express幕后的原班人马打造。我们都知道现在市面上很多的Node 服务框架或者是功能都是基于Express来进行开发的比如说webpack-dev-serverNestNodeBB等等。这主要是因为Express出来的时间比较久而且相对来说比较稳定Express的生态相对的会完善一些另外一点就是Express相对于来说比较容易入门。可以基于官方的工具直接生成天生的自带路由和模板解析插件比较容易上手。
当然既然说Koa是下一代的web开发框架就说明Koa肯定存在有比Express更优秀的地方首先更小另外Koa利用async函数来丢弃Express中的回调函数并且更有力的增强错误处理。由于Koa中没有绑定任何的中间件因此要搭建一套完整的功能就需要自己去添加较多的中间件。对于初学者来说相对的麻烦一些。
接下来就通过实践来逐渐进入到Koa的世界里吧。
Koa的发展历史
在Koa的发展历史中存在两个版本一个Koa 1.x一个是Koa 2.x。但是聊到Koa的发展就不得不聊一下Express因为Koa 同样出自 Express 团队之手。
Express
Express是 Node.js 的第一代流行 web 开发框架主要是对 http 模块进行封装并提供了路由、模板渲染等 web 开发常用功能功能齐全但需要全量引用
由于出现早于 Promise错误处理使用 Node.js 的 callback 风格相应有了回调地狱问题不过随着 Promise 流行现在 Express 4.x、5.x 已经没了这个问题
Express 中间件是线性执行的每一个中间件处理完成之后只有两个选择
交给下一个中间件返回 response
只要是离开中间件后就再也无法返回这样的设计让逻辑非常简单但在很多需要多次处理请求的实现上变得复杂比如统计一个请求的耗时在 Express 中充斥着大量利用事件或者回调来 hack 这种需求的处理方式
exports.responseTime function () {return function (req, res, next) {req.startTime new Date(); // 开始时间const trackTime function () {const endTime new Date(); // 结束时间const duration endTime - req.startTime;console.log(X-Response-Time: , duration ms);}res.once(finish, trackTime);res.once(close, trackTime);return next();}
}
因为其简单、功能高度集成的特性Express 现在仍然是最流行的 Node.js web 开发框架但功能高度集成带来的不灵活和中间件的线性调用特性让越来越多企业级 web 框架封装都选择了使用 koa。
Koa 1.x
Koa 同样出自 Express 团队之手除了 API 变化相对于 Express 做了两个最重要的变更
不再内置任何中间件所有 web 处理中间件都需要引用灵活性和复杂性相伴而来从这个角度讲 Express 才更像是 web 框架利用 generator 特性实现洋葱模型中间件异步处理不再依赖 callback主要靠 co 模块实现
异步的代码书写起来更像是同步代码了但使用 generator 中间件编写风格现在看起来会感觉怪怪的
app.use(function *(next) {const startTime new Date();yield next;const duration new Date - startTime;console.log(X-Response-Time: , duration ms);
})Koa 2.x
理念和 Koa 1.x 一致不过推荐异步处理变成了 async/await其中间件实现也就是前面介绍过的 koa-compose中间件编写风格好理解了很多。
app.use(async (ctx, next) {ctx; // is the Contextctx.request; // is a koa Requestctx.response; // is a koa Response
});
koa 2.x 也把之前使用 this 获取请求、响应等对象修改为了使用 ctx 对象。 接下来的内容主要就是基于Koa 2.x来进行介绍的。有些人在使用的过程中可能会因为某些包的使用出现为这可能是因为版本选择原因。
新建一个Koa的基础项目
对于这一步其实相对来说比较简单就是按照官方给出的步骤依样画葫芦就行了。首先你得有Node环境这都2022年了你得Node不会还停留在7.6以下吧如果这样建议你升级否则后面会有很多的意想不到的问题。然后选择一个自己喜欢的Node包管理工具npmyarnpnpmcnpmtnpm等等都行按照自己熟练的步骤进行初始化一个项目然后安装koa新建一个名为index.js的文件然后使用你喜爱的编辑器在文件中输入以下内容反正我这边使用的vscode。
const Koa require(koa);
const app new Koa();app.use(async ctx {ctx.body Hello World;
});app.listen(3000);
然后使用控制台进入该目录下面直接运行:
node ./index.js
不出意外的话有一种情况就是你本地的3000端口被占用了项目就启动了然后打开浏览器输入http://localhost:3000即可在浏览器中看到有个Hello World的字样。就像下面这样 这样就说明你已经使用了Koa创建了项目了并且该项目能够正常的运行起来了。
中间件的概念
上面说到Koa自身是没有绑定任何的中间件的。这里就会有人不清楚中间件到底是个什么鬼。从字面的理解上就是在某个过程中间所存在工具。那这个过程对于Koa来说这个过程就是一次http通信的过程即Request和Response之间那么这里的中间件主要是用来处理请求数据和响应数据的。
请求报文是由请求方法、请求URI、协议版本、可选的请求首部字段和内容实体构成的。 响应报文基本上由协议版本、状态码表示请求成功或失败的数字代码、用以解释状态码的原因短语、可选的响应首部字段以及实体主体构成。 凡是处理请求报文和响应报文的都可以被称之为中间件我们可以使用中间件来做什么
URI处理也就是所谓的路由处理重置HTTP请求路由统一安全限制、信息上报Header操作、http请求认证屏蔽爬虫提供调试信息请求日志记录对相应结果进行处理视图渲染格式化响应数据……
Koa官方也给收集了不少的中间件Home · koajs/koa Wiki · GitHub我们常用的中间件主要包括有
路由的处理koa-router静态资源处理koa-staticcookiesession处理koa-session日志处理koa-logger……
更多的中间件可以在自己的平时开发的时候根据业务的需要进行查找和自己编写其实不要把这个东西看的很高大上其实只要你明白这中间的一切你就会发现原来不过如此。
中间件的使用
上面聊了中间件的概念了但是到现在还是对Koa的中间件一窍不通可能还是不会使用。但是我们从上面的概念中可以看出来其实Koa中间件一定是一个函数。呢么对于Koa来说应该怎么去使用中间件呢
app.use()
这个方法将给定的中间件方法添加到应用程序中, 并且这个方法会返回 this因此 这个use是能够进行链式调用的。
像我们的的Demo中使用的use本质上也是在使用了一个Koa的中间件。
const Koa require(koa);
const app new Koa();app.use(async ctx {ctx.body Hello World;
});app.listen(3000);
Koa上下文ctx
从上面的Demo中我们会看到在中间件中会有一个参数ctx这个参数呢我们称之为上下文。如果之前了解过express的同学应该知道我们在使用express定义一个中间建的时候会这样去写
app.get(/, (req, res, next) {res.send(Hello World!)
})
我们对比会发现相对于Express来说Koa使用了一个叫做Context的对象将Node中的request 和 response 对象封装在了一起。为编写 Web 应用程序和 API 提供了许多有用的方法。 这些操作在 HTTP 服务器开发中频繁使用它们被添加到此级别而不是更高级别的框架这将强制中间件重新实现此通用功能。
其实Context中不仅仅只有request和response两个对象还有其他很多的对象可以去官网当我们在使用一些中间件的时候也会给ctx注入一些属性或者是方法之类的东西。下面列举一些我们常用的一些属性和方法
ctx.request koa 封装的 request 对象中间件应该尽量使用ctx.reqNode.js 原生的 request 对象ctx.responsekoa 封装的 response 对象中间件应该尽量使用ctx.resNode.js 原生的 response 对象ctx.statekoa 推荐的命名空间用于通过中间件传递信息到前端视图ctx.app对应用实例 app 的引用ctx.cookiescookie 操作对象ctx.throw通过 http status 抛出错误让 koa 可以正确处理
Koa的级联洋葱模型
有关Koa的级联说白了就是我们常说的Koa的洋葱模型 先来通过一个例子来看一下这个级联的效果吧
const Koa require(koa);
const app new Koa();app.use(async (ctx, next) {console.log( 中间件 1开始);await next();console.log(中间件 1结束);// ctx.body JSON.stringify(ctx);
});app.use(async (ctx, next) {console.log( 中间件 2开始);await next();console.log(中间件 2结束);
})app.listen(3000);
我们在运行后访问页面能够在运行的控制台中看到如下的内容输出 也就是说在中间件1执行完成next之后到中间件2中中间件2执行完next之后输出中间件2中的结束内容然后再返回到中间件1中进行后续的操作。这样的整个过程就像洋葱一样一层包裹一层因此被称为洋葱模型。
洋葱模型的好处
按照正常的操作逻辑就是事情不是需要一件一件的做么所以只需要保持顺序的执行过程就行了但是为对于Koa来说却以next函数的执行完成作为分界线要在执行完成之后又回到了当前这个中间件中。
Koa之所以这么设计肯定是有他的用途以及使用场景的也就是说这样的设计肯定是为了解决一些平时常见但是又不太容易去处理的东西。
举个例子如果我们想要统计这次请求的在执行过重用了多长的时间如果没有Koa模型我们实现起来会很复杂并且还会再执行过程中注入一些内容然后在执行完成之后再将注入的内容给卸载掉这样的一个过程可能会来一些不可预知的问题比如说在请求过程中会污染请求对象或者是参数等、在不能够准确的判断我们应该在什么时候去卸载我们注入的内容等……
当然还有别的一些问题因此在Koa中引入了洋葱模型对于解决这样的问题相对来说算是一种比较好的解决思路和方案。
洋葱模型的实现方式
从上面有关Koa的洋葱模型的效果我们大致了解了有关洋葱模型的执行过程但是这里想聊一句如果让你去实现一个洋葱模型你会怎么去实现呢。下面是我的一个实现思路
class App {constructor () {this.middleware [];this.ctx {};}use(asynFun) {this.middleware.push(asynFun);}async run(ctx, next) {const middleware this.middleware;const that this;let index -1;dispatch(0);function dispatch(index) {let fun;if (index that.middleware.length) {fun next;} else {fun that.middleware[index];}if (!fun) {return Promise.resolve();}try {return fun(ctx, async () {await dispatch(index 1);})} catch (err) {return Promise.reject(err)}} }
}const app new App();
app.use(async (ctx, next) {console.log(middleware 1 start);await next();console.log(middleware 1 end);
})
app.use(async (ctx, next) {console.log(middleware 2 start);await next();console.log(middleware 2 end);
})// app.dispatch(0);
app.run({}, async () {console.log(run ……);
})如果在控制台中进行执行的话则执行的结果如下所示 这个结果是不是很熟悉没错这个就是Koa的核心的级联的实现的基础版。接下来我们打开Koa的源码能够看到有以下的内容
use方法维护得到 middleware 中间件数组
use (fn) {if (typeof fn ! function) throw new TypeError(middleware must be a function!)debug(use %s, fn._name || fn.name || -)this.middleware.push(fn)return this
}
2. listen方法Node.js 原生 http 模块 createServer 方法创建了一个服务。
listen (...args) {debug(listen)// 创建一个服务const server http.createServer(this.callback())return server.listen(...args)
}
3. 如果我们继续往深处看会看到Koa引入了一个叫做koa-compose的模块然后我们打开koa-compose这个库能够看到他的底层实现。
function compose(middleware) {return function (context, next) {// last called middleware #let index -1return dispatch(0)function dispatch(i) {if (i index) return Promise.reject(new Error(next() called multiple times))index ilet fn middleware[i]if (i middleware.length) fn nextif (!fn) return Promise.resolve()try {return Promise.resolve(fn(context, function next() {return dispatch(i 1)}))} catch (err) {return Promise.reject(err)}}}是不是很熟悉没错这个方法确实是和我们的自己实现的结果是一样的如果我们将上述的结果进行分装也就是将Http的listen监听有请求过来之后就执行我们的run方法然后在对context加以封装实现一些Koa的基础方法是不是就会觉得其实Koa也不过如此。如果有时间或者说有机会我们也能够实现一个简易版的Koa。 小结
经过以上的分析使我们对Koa有一个简单的认识并且能够使用Koa的来创建项目而且对Koa中的中间件和洋葱模型有一个简单的认识。其实我们会发现很多Koa这个高大上的东西背后其实也不过如此。
