傻瓜式解读koa中间件处理模块koa-compose
最近需要单独使用到koa-compose这个模块,虽然使用koa的时候大致知道中间件的执行流程,但是没仔细研究过源码用起来还是不放心(主要是这个模块代码少,多的话也没兴趣去研究了)。
koa-compose看起来代码少,但是确实绕。闭包,递归,Promise。。。看了一遍脑子里绕不清楚。看了网上几篇解读文章,都是针对单行代码做解释,还是绕不清楚。最后只好采取一种傻瓜的方式:
koa-compose去掉一些注释,类型校验后,源码如下:
function compose (middleware) {
return function (context, next) {
// last called middleware #
let index = -1
return dispatch(0)
function dispatch (i) {
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i
let fn = middleware[i]
if (i === middleware.length) fn = next
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}
写出如下代码:
var index = -1;
function compose() {
return dispatch(0)
}
function dispatch (i) {
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i
var fn = middleware[i]
if (i === middleware.length) fn = next
if (!fn) return Promise.resolve('fn is undefined')
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
function f1(context,next){
console.log('middleware 1');
next().then(data=>console.log(data));
console.log('middleware 1');
return 'middleware 1 return';
}
function f2(context,next){
console.log('middleware 2');
next().then(data=>console.log(data));
console.log('middleware 2');
return 'middleware 2 return';
}
function f3(context,next){
console.log('middleware 3');
next().then(data=>console.log(data));
console.log('middleware 3');
return 'middleware 3 return';
}
var middleware=[
f1,f2,f3
]
var context={};
var next=function(context,next){
console.log('middleware 4');
next().then(data=>console.log(data));
console.log('middleware 4');
return 'middleware 4 return';
};
compose().then(data=>console.log(data));
直接运行结果如下:
"middleware 1"
"middleware 2"
"middleware 3"
"middleware 4"
"middleware 4"
"middleware 3"
"middleware 2"
"middleware 1"
"fn is undefined"
"middleware 4 return"
"middleware 3 return"
"middleware 2 return"
"middleware 1 return"
按着代码运行流程一步步分析:
dispatch(0)
i0,index-1 i>index 往下
index=0
fn=f1
Promise.resolve(f1(context, dispatch.bind(null, 0 + 1)))
这就会执行
f1(context, dispatch.bind(null, 0 + 1))
进入到f1执行上下文
console.log('middleware 1');
输出middleware 1
next()
其实就是调用
dispatch(1)
bind的功劳
递归开始
dispatch(1)
i1,index0 i>index 往下
index=1
fn=f2
Promise.resolve(f2(context, dispatch.bind(null, 1 + 1)))
这就会执行
f2(context, dispatch.bind(null, 1 + 1))
进入到f2执行上下文
console.log('middleware 2');
输出middleware 2
next()
其实就是调用
dispatch(2)
接着递归
dispatch(2)
i2,index1 i>index 往下
index=2
fn=f3
Promise.resolve(f3(context, dispatch.bind(null, 2 + 1)))
这就会执行
f3(context, dispatch.bind(null, 2 + 1))
进入到f3执行上下文
console.log('middleware 3');
输出middleware 3
next()
其实就是调用
dispatch(3)
接着递归
dispatch(3)
i3,index2 i>index 往下
index=3
i === middleware.length
fn=next
Promise.resolve(next(context, dispatch.bind(null, 3 + 1)))
这就会执行
next(context, dispatch.bind(null, 3 + 1))
进入到next执行上下文
console.log('middleware 4');
输出middleware 4
next()
其实就是调用
dispatch(4)
接着递归
dispatch(4)
i4,index3 i>index 往下
index=4
fn=middleware[4]
fn=undefined
reuturn Promise.resolve('fn is undefined')
回到next执行上下文
console.log('middleware 4');
输出middleware 4
return 'middleware 4 return'
Promise.resolve('middleware 4 return')
回到f3执行上下文
console.log('middleware 3');
输出middleware 3
return 'middleware 3 return'
Promise.resolve('middleware 3 return')
回到f2执行上下文
console.log('middleware 2');
输出middleware 2
return 'middleware 2 return'
Promise.resolve('middleware 2 return')
回到f1执行上下文
console.log('middleware 1');
输出middleware 1
return 'middleware 1 return'
Promise.resolve('middleware 1 return')
回到全局上下文
至此已经输出
"middleware 1"
"middleware 2"
"middleware 3"
"middleware 4"
"middleware 4"
"middleware 3"
"middleware 2"
"middleware 1"
那么
"fn is undefined"
"middleware 4 return"
"middleware 3 return"
"middleware 2 return"
"middleware 1 return"
怎么来的呢
回头看一下,每个中间件里都有
next().then(data=>console.log(data));
按照之前的分析,then里最先拿到结果的应该是next中间件的,而且结果就是Promise.resolve('fn is undefined')
的结果,然后分别是f4,f3,f2,f1。那么为什么都是最后才输出呢?
Promise.resolve('fn is undefined').then(data=>console.log(data));
console.log('middleware 4');
运行一下就清楚了
或者
setTimeout(()=>console.log('fn is undefined'),0);
console.log('middleware 4');
整个调用过程还可以看成是这样的:
function composeDetail(){
return Promise.resolve(
f1(context,function(){
return Promise.resolve(
f2(context,function(){
return Promise.resolve(
f3(context,function(){
return Promise.resolve(
next(context,function(){
return Promise.resolve('fn is undefined')
})
)
})
)
})
)
})
)
}
composeDetail().then(data=>console.log(data));
方法虽蠢,但是compose的作用不言而喻了
最后,if (i <= index) return Promise.reject(new Error('next() called multiple times'))
这句代码何时回其作用呢?
一个中间件里调用两次next()
,按照上面的套路走,相信很快就明白了。
傻瓜式解读koa中间件处理模块koa-compose的更多相关文章
- koa2使用&&中间件&&angular2的koa托管
文章导航 1,koa2使用: 2,写中间件: 3,koa2路由配置angular2; 一.先上代码,一篇,看完koa2中大多基础方法: const Koa=require('koa'); const ...
- Koa中间件(middleware)级联原理
前言 上次看到了koa-compose的代码,今天来说一下koa中间件的级联以及工作原理. 中间件工作原理 初始化koa实例后,我们会用use方法来加载中间件(middleware),会有一个数组来存 ...
- Koa 中间件的执行顺序
中间件工作原理 初始化koa实例后,我们会用use方法来加载中间件(middleware),会有一个数组来存储中间件,use调用顺序会决定中间件的执行顺序. 每个中间件都是一个函数(不是函数将报错), ...
- koa 基础(八)koa 中间件的执行顺序
1.koa 中间件的执行顺序 app.js /** * koa 中间件的执行顺序 */ // 引入模块 const Koa = require('koa'); const router = requi ...
- koa中间件系统原理及koa+orm2实践。
koa是由 Express 原班人马打造的新的web框架.套用其官方的说法:Koa 应用是一个包含一系列中间件 generator 函数的对象. 这些中间件函数基于 request 请求以一个类似于栈 ...
- KOA中间件的基本运作原理
示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 在中 ...
- koa 中间件
什么是 Koa 的中间件 通俗的讲:中间件就是匹配路由之前或者匹配路由完成做的一系列的操作,我们就可以 把它叫做中间件. 在express中间件(Middleware)是一个函数,它可以访问请求对象( ...
- koa中间件机制详解
转自:https://cnodejs.org/topic/58fd8ec7523b9d0956dad945 koa是由express原班人马打造的一个更小.更富有表现力.更健壮的web框架. 在我眼中 ...
- 【nodejs原理&源码赏析(2)】KOA中间件的基本运作原理
[摘要] KOA中间件的基本运作原理 示例代码托管在:http://www.github.com/dashnowords/blogs 在中间件系统的实现上,KOA中间件通过async/await来在不 ...
随机推荐
- NET 时间字符串转换
// 把指定格式的日期字符串转换为时间:2018/11/1 0:00:00 DateTime.ParseExact("2018a11","yyyyaMM",Sy ...
- Asp.Net Mvc ScriptBundle 脚本文件捆绑压缩 导致 脚本出错的问题
由于捆绑压缩会对所有包含的文件进行压缩,无法设置忽略对某个js文件的压缩.导致压缩该js后,脚本出错的问题. 解决方式: 重写 ScriptBundle 的 GenerateBundleRespons ...
- C#treeView控件单击事件选中节点滞后问题解决方法
问题描述:在treeView的Click事件中,选中的节点SelectedNode并不是您刚才点击的节点,总是上一次选中的节点,节点选中滞后的问题. 解决方案:在treeView的MouseDown事 ...
- 在centos7升级jenkins
找到jenkins的位置 使用下面的命令 ps -aux | grep jenkins enkins 5954 7.9 22.5 2695800 421088 ? Ssl 20:5 ...
- 理解 BFC
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章, 介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等). 虽然我知道如何利用 BFC 解决这些问 ...
- Day 24 继承
# 一.什么是继承 # 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可成为基类或超类,新建类称为派生类或子类.# python中类的继承分为:单继承和多继承cla ...
- docker 运行容器,安装Nginx
########################################## #运行容器 #安装Nginx #搜索.下载镜像 docker search nginx docker pull n ...
- BZOJ 1008--[HNOI2008]越狱(容斥&快速幂)
1008: [HNOI2008]越狱 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 12593 Solved: 5439[Submit][Status ...
- Spring+Mybatis整合时 Failed to read candidate component class,Caused by:IllegalArgumentException
Spring+Mybatis整合时Caused by: java.lang.IllegalArgumentException错误 org.springframework.beans.factory.B ...
- 【AGC012E】 Camel and Oases ST表+状压dp
题目大意:一排点,两点间有距离. 初始你有一个行走值$v$,如果相邻两点距离不超过$v$你可以自由在这两点行走. 当$v$大于$0$时,你可以选择某一时刻突然飞到任意点,这样做后$v$会减半(下取整) ...