傻瓜式解读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来在不 ...
随机推荐
- Java计算手机九宫格锁屏图案连接9个点的方案总数
(一)问题 九宫格图案解锁连接9个点共有多少种方案? (二)初步思考 可以把问题抽象为求满足一定条件的1-9的排列数(类似于“八皇后问题”),例如123456789和987654321都是合法的(按照 ...
- net 串口通讯 网口通讯(Socket)
1.串口通讯 2.网口(Socket) 源码下载:源码附件
- (zxing.net)一维码MSI的简介、实现与解码
一.简介 MSI/Plessey 条码(也被称为 MSI 或 Modified Plessey)是一款数字条码,多用于超市.存储用的仓库和其他贮藏室的货架.货架上的条码可以告知货架上的产品.应放数量和 ...
- C#多线程编程系列(四)- 使用线程池
目录 1.1 简介 1.2 在线程池中调用委托 1.3 向线程池中放入异步操作 1.4 线程池与并行度 1.5 实现一个取消选项 1.6 在线程池中使用等待事件处理器及超时 1.7 使用计时器 1.8 ...
- 我所理解的网络游戏<一>:网游的顶层设计
网游的基本结构 各大模块的基本功能如下 · 服务器端 登陆服:处理新建玩家.登陆逻辑. 场景服:处理场景服中的逻辑. 中心服:处理跨服的逻辑,实现不同场景服进程的数据调度,以及向数据库查询数据. 数据 ...
- 【cocos2d-x 手游研发小技巧(7)图片资源加密,Lua文件加密】
游戏开发中常遇到资源保护的问题. 目前游戏开发中常加密的文件类型有:图片,Lua文件,音频等文件,而其实加密也是一把双刃剑. 需要安全那就得耗费一定的资源去实现它.目前网上也有用TexturePack ...
- 《JavaScript模式》一书中提到的一些坑
1. 应当用数组字面量来创建数组,而不是用new Array() //反模式 var a = new Array('itsy', 'bitsy', 'spider'); //用字面量 var a = ...
- [原创] 基础中的基础(二):C/C++ 中 const 修饰符用法总结
在这篇文章中,我总结了一些C/C++语言中的 const 修饰符的常见用法,供大家参考. const 的用法,也是技术性面试中常见的基础问题,希望能够帮大家梳理一下知识,给大家一点点帮助.作者是菜鸟一 ...
- day 93 Restframwork
苑昊博客: http://www.cnblogs.com/yuanchenqi/articles/7570003.html 一.queryset 特性 from django.db import m ...
- Yes,I know the way to learn Ens !
In recent years, translation has gone out of fashion as a way to learn a new language. A lot of peop ...