侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

深入解读Node.js中的koa源码

前端  /  管理员 发布于 5年前   293

前言

Node.js也是写了两三年的时间了,刚开始学习Node的时候,hello world就是创建一个HttpServer,后来在工作中也是经历过Express、Koa1.x、Koa2.x以及最近还在研究的结合着TypeScript的routing-controllers(驱动依然是Express与Koa)。

用的比较多的还是Koa版本,也是对它的洋葱模型比较感兴趣,所以最近抽出时间来阅读其源码,正好近期可能会对一个Express项目进行重构,将其重构为koa2.x版本的,所以,阅读其源码对于重构也是一种有效的帮助。

Koa是怎么来的

首先需要确定,Koa是什么。

任何一个框架的出现都是为了解决问题,而Koa则是为了更方便的构建http服务而出现的。

可以简单的理解为一个HTTP服务的中间件框架。

使用http模块创建http服务

相信大家在学习Node时,应该都写过类似这样的代码:

const http = require('http')const serverHandler = (request, response) => {response.end('Hello World') // 返回数据}http.createServer(serverHandler).listen(8888, _ => console.log('Server run as http://127.0.0.1:8888'))

一个最简单的示例,脚本运行后访问http://127.0.0.1:8888即可看到一个Hello World的字符串。
但是这仅仅是一个简单的示例,因为我们不管访问什么地址(甚至修改请求的Method),都总是会获取到这个字符串:

> curl http://127.0.0.1:8888> curl http://127.0.0.1:8888/sub> curl -X POST http://127.0.0.1:8888

所以我们可能会在回调中添加逻辑,根据路径、Method来返回给用户对应的数据:

const serverHandler = (request, response) => {// defaultlet responseData = '404'if (request.url === '/') {if (request.method === 'GET') {responseData = 'Hello World'} else if (request.method === 'POST') {responseData = 'Hello World With POST'}} else if (request.url === '/sub') {responseData = 'sub page'}response.end(responseData) // 返回数据}

类似Express的实现

但是这样的写法还会带来另一个问题,如果是一个很大的项目,存在N多的接口。

如果都写在这一个handler里边去,未免太过难以维护。

示例只是简单的针对一个变量进行赋值,但是真实的项目不会有这么简单的逻辑存在的。

所以,我们针对handler进行一次抽象,让我们能够方便的管理路径:

class App {constructor() {this.handlers = {}this.get = this.route.bind(this, 'GET')this.post = this.route.bind(this, 'POST')}route(method, path, handler) {let pathInfo = (this.handlers[path] = this.handlers[path] || {})// register handlerpathInfo[method] = handler}callback() {return (request, response) => {let { url: path, method } = requestthis.handlers[path] && this.handlers[path][method]? this.handlers[path][method](request, response): response.end('404')}}}

然后通过实例化一个Router对象进行注册对应的路径,最后启动服务:

const app = new App()app.get('/', function (request, response) {response.end('Hello World')})app.post('/', function (request, response) {response.end('Hello World With POST')})app.get('/sub', function (request, response) {response.end('sub page')})http.createServer(app.callback()).listen(8888, _ => console.log('Server run as http://127.0.0.1:8888'))

Express中的中间件

这样,就实现了一个代码比较整洁的HttpServer,但功能上依旧是很简陋的。

如果我们现在有一个需求,要在部分请求的前边添加一些参数的生成,比如一个请求的唯一ID。

将代码重复编写在我们的handler中肯定是不可取的。

所以我们要针对route的处理进行优化,使其支持传入多个handler:

route(method, path, ...handler) {let pathInfo = (this.handlers[path] = this.handlers[path] || {})// register handlerpathInfo[method] = handler}callback() {return (request, response) => {let { url: path, method } = requestlet handlers = this.handlers[path] && this.handlers[path][method]if (handlers) {let context = {}function next(handlers, index = 0) {handlers[index] &&handlers[index].call(context, request, response, () =>next(handlers, index + 1))}next(handlers)} else {response.end('404')}}}

然后针对上边的路径监听添加其他的handler:

function generatorId(request, response, next) {this.id = 123next()}app.get('/', generatorId, function(request, response) {response.end(`Hello World ${this.id}`)})

这样在访问接口时,就可以看到Hello World 123的字样了。

这个就可以简单的认为是在Express中实现的 中间件。

中间件是Express、Koa的核心所在,一切依赖都通过中间件来进行加载。

更灵活的中间件方案-洋葱模型

上述方案的确可以让人很方便的使用一些中间件,在流程控制中调用next()来进入下一个环节,整个流程变得很清晰。

但是依然存在一些局限性。

例如如果我们需要进行一些接口的耗时统计,在Express有这么几种可以实现的方案:

function beforeRequest(request, response, next) {this.requestTime = new Date().valueOf()next()}// 方案1. 修改原handler处理逻辑,进行耗时的统计,然后end发送数据app.get('/a', beforeRequest, function(request, response) {// 请求耗时的统计console.log(`${request.url} duration: ${new Date().valueOf() - this.requestTime}`)response.end('XXX')})// 方案2. 将输出数据的逻辑挪到一个后置的中间件中function afterRequest(request, response, next) {// 请求耗时的统计console.log(`${request.url} duration: ${new Date().valueOf() - this.requestTime}`)response.end(this.body)}app.get('/b',beforeRequest,function(request, response, next) {this.body = 'XXX'next() // 记得调用,不然中间件在这里就终止了},afterRequest)

无论是哪一种方案,对于原有代码都是一种破坏性的修改,这是不可取的。

因为Express采用了response.end()的方式来向接口请求方返回数据,调用后即会终止后续代码的执行。

而且因为当时没有一个很好的方案去等待某个中间件中的异步函数的执行。

function a(_, _, next) {console.log('before a')let results = next()console.log('after a')}function b(_, _, next) {console.log('before b')setTimeout(_ => {this.body = 123456next()}, 1000)}function c(_, response) {console.log('before c')response.end(this.body)}app.get('/', a, b, c)

就像上述的示例,实际上log的输出顺序为:

before abefore bafter abefore c

这显然不符合我们的预期,所以在Express中获取next()的返回值是没有意义的。

所以就有了Koa带来的洋葱模型,在Koa1.x出现的时间,正好赶上了Node支持了新的语法,Generator函数及Promise的定义。
所以才有了co这样令人惊叹的库,而当我们的中间件使用了Promise以后,前一个中间件就可以很轻易的在后续代码执行完毕后再处理自己的事情。

但是,Generator本身的作用并不是用来帮助我们更轻松的使用Promise来做异步流程的控制。

所以,随着Node7.6版本的发出,支持了async、await语法,社区也推出了Koa2.x,使用async语法替换之前的co+Generator。

Koa也将co从依赖中移除(2.x版本使用koa-convert将Generator函数转换为promise,在3.x版本中将直接不支持Generator)

由于在功能、使用上Koa的两个版本之间并没有什么区别,最多就是一些语法的调整,所以会直接跳过一些Koa1.x相关的东西,直奔主题。

在Koa中,可以使用如下的方式来定义中间件并使用:

async function log(ctx, next) {let requestTime = new Date().valueOf()await next()console.log(`${ctx.url} duration: ${new Date().valueOf() - requestTime}`)}router.get('/', log, ctx => {// do something...})

因为一些语法糖的存在,遮盖了代码实际运行的过程,所以,我们使用Promise来还原一下上述代码:

function log() {return new Promise((resolve, reject) => {let requestTime = new Date().valueOf()next().then(_ => {console.log(`${ctx.url} duration: ${new Date().valueOf() - requestTime}`)}).then(resolve)})}

大致代码是这样的,也就是说,调用next会给我们返回一个Promise对象,而Promise何时会resolve就是Koa内部做的处理。
可以简单的实现一下(关于上边实现的App类,仅仅需要修改callback即可):

callback() {return (request, response) => {let { url: path, method } = requestlet handlers = this.handlers[path] && this.handlers[path][method]if (handlers) {let context = { url: request.url }function next(handlers, index = 0) {return new Promise((resolve, reject) => {if (!handlers[index]) return resolve()handlers[index](context, () => next(handlers, index + 1)).then(resolve,reject)})}next(handlers).then(_ => {// 结束请求response.end(context.body || '404')})} else {response.end('404')}}}

每次调用中间件时就监听then,并将当前Promise的resolve与reject处理传入Promise的回调中。

也就是说,只有当第二个中间件的resolve被调用时,第一个中间件的then回调才会执行。

这样就实现了一个洋葱模型。

就像我们的log中间件执行的流程:

  1. 获取当前的时间戳requestTime
  2. 调用next()执行后续的中间件,并监听其回调
  3. 第二个中间件里边可能会调用第三个、第四个、第五个,但这都不是log所关心的,log只关心第二个中间件何时resolve,而第二个中间件的resolve则依赖他后边的中间件的resolve。
  4. 等到第二个中间件resolve,这就意味着后续没有其他的中间件在执行了(全都resolve了),此时log才会继续后续代码的执行

所以就像洋葱一样一层一层的包裹,最外层是最大的,是最先执行的,也是最后执行的。(在一个完整的请求中,next之前最先执行,next之后最后执行)

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

您可能感兴趣的文章:

  • Node.js中Koa2在控制台输出请求日志的方法示例
  • node.js学习笔记之koa框架和简单爬虫练习
  • Node.js Koa2使用JWT进行鉴权的方法示例
  • Node.js的Koa实现JWT用户认证方法
  • Node.js使用Koa搭建 基础项目
  • Node.js环境下Koa2添加travis ci持续集成工具的方法
  • 利用Node.js+Koa框架实现前后端交互的方法
  • Node.js的Koa框架上手及MySQL操作指南


  • 上一条:
    Vue监听页面刷新和关闭功能
    下一条:
    JavaScript静态作用域和动态作用域实例详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客