AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

KoaJS

2022-07-14 242
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： koa致力于成为一个更小、更富有表现力、更健壮的、更轻量的web开发框架。因为它所有功能都通过插件实现，这种插拔式的架构设计模式，很符合unix哲学。

前言
koa致力于成为一个更小、更富有表现力、更健壮的、更轻量的web开发框架。因为它所有功能都通过插件实现，这种插拔式的架构设计模式，很符合unix哲学。
一个简单的服务，如下：
const Koa = require('koa')
let app = new Koa()
app.use((ctx, next) => {

console.log(ctx)

})
app.listen(4000)
复制代码
然后在浏览器端打开http://127.0.0.1:4000即可访问
若没有指定返回body，koa默认处理成了Not Found
本文内容：

中间件原理（结合代码）

原理
中间件实现思路
理解上述洋葱模型

阅读源码

app.listen()
ctx挂载内容

context.js
request.js
response.js
挂载ctx

next构建的洋葱模型

app.use((ctx, next) =< { ... })
中间件含异步代码如何保证正确执行
返回报文
解决多次调用next导致混乱问题

基于事件驱动去处理异常

koa2, koa1 和 express区别

一、中间件原理（结合代码）
原理

中间件执行就像穿越洋葱一样，最早use的中间件，就放在最外层。处理顺序横穿洋葱，从左到右，左边接收一个request，右边输出返回response；
一般的中间件都会执行两次，调用next之前为第一次，调用next时把控制传递给下游的下一个中间件。当下游不再有中间件或者没有执行next函数时，就将依次恢复上游中间件的行为，让上游中间件执行next之后的代码；

如下代码：
const Koa = require('koa')
const app = new Koa()
app.use((ctx, next) => {

console.log(1)
next()
console.log(3)

})
app.use((ctx) => {

console.log(2)

})
app.listen(9001)

执行结果是1=>2=>3

复制代码
中间件实现思路

注意其中的compose函数，这个函数是实现中间件洋葱模型的关键

// 场景模拟
// 异步 promise 模拟
const delay = async () => {
return new Promise((resolve, reject) => {

setTimeout(() => {
  console.log('delay 2000ms')
  resolve();
}, 2000);

});
}
// 中间间模拟
const fn1 = async (ctx, next) => {
console.log(1);
await next();
console.log(2);
}
const fn2 = async (ctx, next) => {
console.log(3);
await delay();
await next();
console.log(4);
}
const fn3 = async (ctx, next) => {
console.log(5);
}

const middlewares = [fn1, fn2, fn3];

// compose 实现洋葱模型
const compose = (middlewares, ctx) => {
const dispatch = (i) => {

let fn = middlewares[i];
if(!fn){ return Promise.resolve() }
return Promise.resolve(fn(ctx, () => {
  return dispatch(i+1);
}));

}
return dispatch(0);
}

compose(middlewares, 1);
复制代码
理解上述洋葱模型
const fn1 = async (ctx, next) => {

console.log(1); 

const fn2 = async (ctx, next) => { 
    console.log(3); 
    await delay(); 

    const fn3 = async (ctx, next) => { 
        console.log(5); 
    }

    console.log(4); 
}

console.log(2);

}

1 3 5 4 2

复制代码
看完这个，大概了解koa的中间件原理了吧。
接下来，咱们一起看下源码。
二、阅读源码

核心文件四个

application.js：简单封装http.createServer()并整合context.js
application.js是koa的入口文件，它向外导出了创建class实例的构造函数，
它继承了events，这样就会赋予框架事件监听和事件触发的能力。
application还暴露了一些常用的api，比如toJSON、listen、use等等。

listen的实现原理其实就是对http.createServer进行了一个封装，
重点是这个函数中传入的callback，
它里面包含了中间件的合并，上下文的处理，对res的特殊处理。

use是收集中间件，将多个中间件放入一个缓存队列中，
然后通过koa-compose这个插件进行递归组合调用这一些列的中间件。
复制代码

context.js：代理并整合request.js和response.js
request.js：基于原生req封装的更好用
response.js：基于原生res封装的更好用

koa是用ES6实现的，主要是两个核心方法app.listen()和app.use((ctx, next) => { ... })

  1. app.listen()

在application.js中实现 app.listen()
handleRequest()

application.js

const http = require('http')
class Koa {
  constructor () {
    // ...
  }  
    // 处理用户请求
  handleRequest (req, res) {
    // req & res nodejs native
    // ...
  }  
  listen (...args) {
    let server = http.createServer(this.handleRequest.bind(this))
    server.listen(...args)
  }  
}
module.exports = Koa

复制代码

  1. ctx挂载内容

ctx = {}
ctx.request = {}
ctx.response = {}
ctx.req = ctx.request.req = req
ctx.res = ctx.response.res = res
ctx.xxx = ctx.request.xxx
ctx.yyy = ctx.response.yyy
复制代码
我们需要以上几个对象，最终都代理到ctx对象上。
创建context.js/request.js/response.js三个文件

2.1 request.js内容

request.js

const url = require('url')
let request = {}
module.exports = request
复制代码
在request.js中，使用ES5提供的属性访问器实现封装

request.js

const url = require('url')
let request = {
get url () {

return this.req.url // 此时的this为调用的对象 ctx.request

},
get path () {

let { pathname } = url.parse(this.req.url)
return pathname

},
get query () {

let { query } = url.parse(this.req.url, true)
return query

}
// ...更多待完善
}
module.exports = request
复制代码
以上实现了封装request并代理到ctx上

2.2 response.js内容

response.js

let response = {}
module.exports = response
复制代码
在response.js中，使用ES5提供的属性访问器实现封装

response.js

let response = {
set body (val) {

this._body = val

},
get body () {

return this._body // 此时的this为调用的对象 ctx.response

}
// ...更多待完善
}
module.exports = response
复制代码
以上实现了封装response并代理到ctx上

2.3 context.js内容

context.js 初始化

let context = {}

module.exports = context
复制代码
在context.js中，使用__defineGetter__ / __defineSetter__实现代理，他是Object.defineProperty()方法的变种，可以单独设置get/set，不会覆盖设置。

context.js

let context = {}
// 定义获取器
function defineGetter (key, property) {
context.__defineGetter__ (property, function () {

return this[key][property]

})
}
// 定义设置器
function defineSetter (key, property) {
context.__defineSetter__ (property, function (val) {

this[key][property] = val

})
}

// 🌰
// 代理 request
defineGetter('request', 'path')
defineGetter('request', 'url')
defineGetter('request', 'query')
// 代理 response
defineGetter('response', 'body')
defineSetter('response', 'body')
module.exports = context
复制代码

2.4 application.js 挂载ctx
在application.js中引入上面三个文件并放到实例上
const context = require('./context')
const request = require('./request')
const response = require('./response')
class Koa extends Emitter{
constructor () {

super()
// Object.create 切断原型链, 深拷贝配置
this.context = Object.create(context)
this.request = Object.create(request)
this.response = Object.create(response)

}
}
复制代码
然后处理用户请求并在ctx上代理request / response
createContext()
# application.js

// 创建上下文
createContext (req, res) {

let ctx = this.context
// 请求
ctx.request = this.request
ctx.req = ctx.request.req = req
// 响应
ctx.response = this.response
ctx.res = ctx.response.res = res
return ctx

}

// server connection 回调
handleRequest (req, res) {

let ctx = this.createContext(req, res)
return ctx

}
复制代码

哎嘿，有个req还有个request，两个一样吗？

console.log('native req ----') // node原生的req
console.log(ctx.req.url)
console.log(ctx.request.req.url)
console.log('koa request ----') // koa封装了request
console.log(ctx.url)
console.log(ctx.request.url)
复制代码

  1. next构建的洋葱模型

接下来实现koa中第二个方法app.use((ctx, next) =< { ... })
app.use((ctx, next) =< { ... })
use中存放着一个个中间件，如cookie、session、static...等等一堆处理函数，并且以洋葱式的形式执行。
# application.js

constructor () {

// ...
// 存放中间件数组
this.middlewares = []

}
// 使用中间件
use (fn) {

this.middlewares.push(fn)

}
复制代码
当处理用户请求时，期望执行所注册的一堆中间件
compose、dispatch
# application.js

// 组合中间件
compose (middlewares, ctx) {

function dispatch (index) {
  // 迭代终止条件 取完中间件
  // 然后返回成功的promise
  if (index === middlewares.length) return Promise.resolve()
  let middleware = middlewares[index]
  // 让第一个函数执行完，如果有异步的话，需要看看有没有await
  // 必须返回一个promise
  return Promise.resolve(middleware(ctx, () => dispatch(index + 1)))
}
return dispatch(0)

}

// 处理用户请求
handleRequest (req, res) {

let ctx = this.createContext(req, res)

this.compose(this.middlewares, ctx)

return ctx

}
复制代码
以上的dispatch迭代函数在很多地方都有运用，比如递归删除目录，也是koa的核心。
中间件含异步代码如何保证正确执行
返回的promise主要是为了处理中间件中含有异步代码的情况
返回报文
在所有中间件执行完毕后，需要渲染页面。
# application.js

// 处理用户请求
handleRequest (req, res) {

let ctx = this.createContext(req, res)

res.statusCode = 404 // 默认404 当设置body再做修改

let ret = this.compose(this.middlewares, ctx)

ret.then(_ => {
  if (!ctx.body) { // 没设置body
    res.end(`Not Found`)
  } else if (ctx.body instanceof Stream) { // 流
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    
    ctx.body.pipe(res)
  } else if (typeof ctx.body === 'object') { // 对象
    res.setHeader('Content-Type', 'text/josn;charset=utf-8')
    
    res.end(JSON.stringify(ctx.body))
  } else { // 字符串
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    
    res.end(ctx.body)
  }
})
return ctx

}
复制代码
需要考虑多种情况做兼容。

文章标签：
前端开发
Unix
API
中间件
缓存
开发框架
设计模式
运营研究坊
目录
相关文章
小华qvq
|
7月前
|
JavaScript 前端开发
js详解1
js详解1
小华qvq
42 2
vohelon
|
4月前
|
缓存 前端开发 算法
Next.js
Next.js【8月更文挑战第4天】
vohelon
69 1
Liuqz2009
|
4月前
|
JavaScript 前端开发
JS中比较
JS中比较
Liuqz2009
29 0
北原_春希
|
6月前
|
XML JavaScript 前端开发
JS是什么
JS是什么
北原_春希
136 0
小华qvq
|
7月前
|
JavaScript
js的一些理解
js的一些理解
小华qvq
40 1
一个大长腿.
|
编解码 JavaScript 前端开发
什么是js？（初步了解）
什么是js？（初步了解）
一个大长腿.
241 0
木木木和小琳琳
|
JSON JavaScript 数据格式
vue.js axios使用
vue.js axios使用
木木木和小琳琳
70 0
YiYa_咿呀
|
前端开发
Umi.js
Umi.js
YiYa_咿呀
223 0
史一试
|
JSON 缓存 JavaScript
JS之12个小技巧
JS之12个小技巧
史一试
109 0
JS之12个小技巧
嘿嘿不务正业
|
JSON API 数据格式
一起来学 next.js - getServerSideProps 篇
getServerSideProps 是 next.js 中的一项特色功能，可以让我们在给页面设置一些初始的 props 参数。
嘿嘿不务正业
737 0

热门文章

最新文章

  • 1
    使用MaxCompute访问TableStore（OTS） 简明手册
  • 2
    从超模转职成为程序媛是一种怎样的体验
  • 3
    阿里巴巴NACOS（6）- 在k8s上部署Nacos
  • 4
    将任意应用窗口置顶显示，这个工具太强了。
  • 5
    Wi-Fi物联网设备配网的N种方式
  • 6
    WCF分布式安全开发实践(8):消息安全模式之用户名身份验证:Message_UserName_WSHttpBinding
  • 7
    TechED2010与我（二）—— Windows Phone 7 Develop
  • 8
    华尔街认为Twitter出售毫无悬念 只是不会在今年发生
  • 9
    迂者趣事之——下错楼层
  • 10
    Unix Regex
  • 1
    检测指定TCP端口开放状态免费API接口教程
    22
  • 2
    Python 语言：强大、灵活与高效的编程之选
    28
  • 3
    发现一肉鸡接口，快来围攻啦~
    28
  • 4
    深入解析PID控制算法：从理论到实践的完整指南
    26
  • 5
    《C++ 模型训练之早停法：有效预防过拟合的关键策略》
    24
  • 6
    C++构建 GAN 模型：生成器与判别器平衡训练的关键秘籍
    22
  • 7
    通过matlab分别对比PSO,反向学习PSO,多策略改进反向学习PSO三种优化算法
    24
  • 8
    【C语言】宏定义详解
    22
  • 9
    【C语言】进程和线程详解
    17
  • 10
    【C语言】宏定义详解
    20

    • 相关课程

    更多
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月