《koa诞生记》——compose源码从零解析

Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. By leveraging async functions, Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods that make writing servers fast and enjoyable.

上面是koa的官网的简单介绍,只需要关心一点: 中间件机制是koa的核心。
可以说,理解了中间件也就理解了koa框架的精华。而实现中间件机制的关键是compose函数。

洋葱模型的基本介绍

每个中间件需要依次处理request和response请求。这种中间件模型称为洋葱模型(Onion model)

洋葱模型
中间件执行过程

上面的代码可以记录response请求的时间。可以看到,利用koa实现logger,代码相当简洁。

compose 1.0 版本实现

五年前,前端没有async的情况下,compose的实现其实相当复杂,利用了Thunk、generator、Co来进行异步管理。不过,可以看到即使前端变化非常之大,compose的核心理念依然没有发生改变。

  • 不考虑任何异步情况,实现洋葱模型

function fn1(next) {
    console.log(1);
    next();
}

function fn2(next) {
    console.log(2);
    next();
}

function fn3(next) {
    console.log(3);
    next();
}

middleware = [fn1, fn2, fn3]

function compose(middleware){
   function dispatch (index){
        if(index == middleware.length) return ;
        var curr;
        curr = middleware[index];
       // 这里使用箭头函数,让函数延迟执行
        return curr(() => dispatch(++index))
  }
  dispatch(0)
};

compose(middleware);

根据分析,最后实际上将几个函数通过串联的方式进行了连接:
fn = fn1(() => fn2(() => fn3(prev)))
对于 fn1来说,next函数就是 ()=> fn2( () => fn3())

  • 考虑无promise的异步情况。(callback+generator)

    当出现generator类型的时候,我们next允许接受Generator类型

function * fn1(next) {
    console.log(1);
    //如果没有yield,就无法进行递归调用
    yield next();
}

function * fn2(next) {
    console.log(2);
    yield next();
}

function * fn3(next) {
    console.log(3);
    yield next();
}
middleware = [fn1, fn2, fn3]

function compose(middleware){
   function dispatch (index){
        if(index == middleware.length) return ;
        var curr;

        function* prev(){
            console.log('none');
        }
        curr = middleware[index]
        console.log(curr);
        return curr(() => dispatch(++index))
  }
  return dispatch(0)
};

compose(middleware)

这时候运行,compose(middleware)实际上是一个 [GeneratorFunction fn1]的类型。

如果我们需要达到第一种代码的运行效果,手动执行如下:

k0 = compose(middleware).next()
k1 = k0.value
k2 = k1.next().value
k3 = k2.next()

//输出为1 2 3

中间件多的话,手动执行就无法实现。可以增加一个自动执行generator的函数:

function co (gen) {
    let g = gen;
    function next(nex) {
        let result = nex.next();
        if(result.done) return result.value;
        if(typeof result.value == 'object') {
            next(result.value);
        }
    }
    next(g);
}

//再次执行, 输出为123
co(compose(middleware))

generator+co的方式实现中间件代码逻辑相当复杂,上面只是考虑了三种情况下的一种。

compose 2.0 版本实现

  • 利用promise实现


function compose(middleware){
   function dispatch (index){
        if(index == middleware.length) return ;
        var curr;

        function prev(){
            next;
        }
        curr = middleware[index];
       // 这里使用箭头函数,让函数延迟执行
        return curr(() => dispatch(++index))
  }
  dispatch(0)
};

当异步操作使用 async/await的时候,上面compose的实现已经可以解决异步问题。(async函数可以看作同步函数)。但是,异步操作代码,如果抛出错误,上面的代码无法对错误进行捕捉。

function * fn1(next) {
    console.log(1);
    throw new Error('错误无法捕捉');
    //如果没有yield,就无法进行递归调用
    yield next();
}

考虑到,async其实返回一个Promise类型,我们将所有的中间件函数包裹成一个Promise对象。然后,通过 rejectcatch来进行错误处理。

function compose(middleware){
   function dispatch (index){
        if(index == middleware.length) return Promise.resolve();
        var curr;

        function prev(){
            next;
        }
        curr = middleware[index];
       // 修改成Promise对象
        return Promise.resolve(curr(() => dispatch(++index)));
  }
  dispatch(0)
};
  • 函数式风格实现

从上面的实现我们可以看出来,以上所有的实现,都无非是把中间件函数 fn1, fn2, fn3包裹成下列形式:
fn = fn1(() => fn2(() => fn3(prev)))
那么,对于习惯使用函数式编程的人来说,这其实是一个右向reduce的过程。

function compose () {
    return this.middlewares.reduceRight( (a, b) => () => b(a), () => {})();
}

然后,如果需要修改返回类型是Promise类型,那么可以简单的修改为:

function compose () {
    return this.middlewares.reduceRight( (a, b) => () => Promise.resolve(b(a)), () => {})();
}

引用

compose代码解析

koa2 洋葱模型

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容

  • 看到标题,也许您会觉得奇怪,redux跟Koa以及Express并不是同一类别的框架,干嘛要拿来做类比。尽管,例如...
    Perkin_阅读 1,718评论 0 4
  • Koa源码解析 整体架构 核心文件只有4个,在lib文件夹下: application.js koa框架的入口...
    Ethan_lcm阅读 2,429评论 0 1
  • 陆陆续续用了koa和co也算差不多用了大半年了,大部分的场景都是在服务端使用koa来作为restful服务器用,使...
    Sunil阅读 1,535评论 0 3
  • 今天,成都五凤溪古镇闲逛,碧蓝的天空如梦如幻。 碧空纤云舞 镜湖翠柳染 秋阳如夏灸人脸 晓风微拂起轻澜
    小冰橙儿阅读 176评论 0 0
  • 前一阵子,因为给自己定下了一个锻炼身体的计划,在体内不明亢奋的因素影响下,第一周感觉非常好,每天都有大量的多巴胺分...
    赵程冲阅读 105评论 0 0