前言
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) => { ... })
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
复制代码- 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.requestctx.req = ctx.request.req = req// 响应ctx.response = this.responsectx.res = ctx.response.res = resreturn 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)
复制代码
- 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
}
复制代码
须要思考多种状况做兼容。