傻瓜式解读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来在不 ...
随机推荐
- SqlServer Session共享注意点
公司下派任务,之前的网站是一台服务器,由于用户过多,负载过大,现在老大要求多加一台服务器.加就加贝,应该跟我这DEV没有 关系吧,应该不会碰到Source的吧.但是,之前网站有一些数据是放在Sessi ...
- C#Winfrom Listview数据导入Excel
需引用 public void ExportToExecl() { System.Windows.Forms.SaveFileDialog sfd = new SaveFileDialog(); sf ...
- golang 编译为dll 的方法
之前一直再找如何将geojson 转为 svg 格式的数据,看到github上大多都是js来转的,只有一篇是golang来做的,想来把它封成dll 给c#.c++ 调用,网上查了很多方法,并没有写的很 ...
- MySQL使用 IN 查询取出数据排序问题(与in排序相同、不排序)
MySQL使用 IN 查询取出数据排序问题(与in排序相同) 今天在项目中遇到一个问题,就是做一个最近浏览的功能,但是功能做出来了,取出数据时候要用到类似这么一条带in查询的sql语句, select ...
- LCS2 - Longest Common Substring II(spoj1812)(sam(后缀自动机)+多串LCS)
A string is finite sequence of characters over a non-empty finite set \(\sum\). In this problem, \(\ ...
- Nginx + uWSGI 部署Django 项目,并实现负载均衡
一.uWSGI服务器 uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换. 要注意 WSGI ...
- Ceres入门笔记
介绍 Ceres可以解决下列形式的边界约束鲁棒非线性最小二乘问题 (1) $\min\limits_{x}\quad \frac{1}{2} \sum\limits_{i}\rho_{i}\left( ...
- [Swift实际操作]七、常见概念-(5)使用NSString对字符串进行各种操作
本文将为你演示字符串NSString的使用,NS是Cocoa类对象类型的前缀,来源于乔布斯建立的另一家公司--NeXT NSString的使用方法,和Swift语言中的String有很多相似之处.首先 ...
- HttpClient调用IdentityServer4获取Token并调用接口
using System; using System.Net.Http; using IdentityModel.Client; namespace ClientCredential { class ...
- badboy录制网站出现css样式混乱,网页的图标点击没反应
本人在测试web工作过程中,遇到了标题一样的问题.苦恼很久也没有找到原因.后面自己摸索,发现了问题所在! badboy安装是2.2.5版本:ie最新版本: 原因:首次安装badboy的时候,所默认的浏 ...