读 koa2 源码后的一些思考与实践

koa2的特点优势

什么是 koa2

  1. Nodejs官方api支持的都是callback形式的异步编程模型。问题：callback嵌套问题
  2. koa2 是由 Express原班人马打造的，是现在比较流行的基于Node.js平台的web开发框架，Koa 把 Express 中内置的 router、view 等功能都移除了，使得框架本身更轻量，而且扩展性很强。使用koa编写web应用，可以免除重复繁琐的回调函数。

koa2 的优点

优点这个东西，我直接说它多好，你可能又不开心，但是我们可以对比哦！这里我只说它对比原生的 Node.js开启 http 服务 带来了哪些优点！

  • 先看一下原生 Node.js 我开启一个 http 服务 
const http = require('http');

http.createServer((req,res)=>{
    res.writeHead(200);
    res.end('hi koala');
}).listen(3000);
  • 看一下使用 koa2 开启一个http 服务 
const Koa = require('koa') ;
const app = new Koa();
const {createReadStream} = require('fs');

app.use(async (ctx,next)=>{
    if(ctx.path === '/favicon.ico'){
        ctx.body = createReadStream('./avicon.ico')
    }else{
        await next();
    }
});

app.use(ctx=>{
    ctx.body = 'hi koala';
})
app.listen(3000);

我在 koa2 中添加了一个判断 /favicon.ico 的实现 通过以上两段代码，会发现下面几个优点

  1. 传统的 http 服务想使用模块化不是很方便，我们不能在一个服务里面判断所有的请求和一些内容。而 koa2 对模块化提供了更好的帮助
  2. koa2 把 req，res 封装到了 context 中，更简洁而且方便记忆
  3. 中间件机制，采用洋葱模型,洋葱模型流程记住一点(洋葱是先从皮到心，然后从心到皮)，通过洋葱模型把代码流程化，让流水线更加清楚，如果不使用中间件，在 createServer 一条线判断所有逻辑确实不好。
  4. 看不到的优点也很多，error 错误处理，res的封装处理等。

自己实现一个koa2

在实现的过程中会我看看可以学到那些知识

listen 函数简单封装

koa2 直接使用的时候，我们通过 const app = new Koa();,koa 应该是一个类，而且可以直接调用 listen 函数，并且没有暴漏出http 服务的创建，说明在listen函数中可能创建了服务。到此简单代码实现应该是这样的:

class Kkb{
    constructor(){
        this.middlewares = [];
    }
    listen(...args){
        http.createServer(async (req,res)=>{
            
        // 给用户返回信息
         this.callback(req,res);
         res.writeHead(200);
         res.statusCode = 200;
         res.end('hello koala')
        }).listen(...args)
    }
}
module.exports = Kkb;

实现 context 的封装

实现了简单 listen 后，会发现回调函数返回的还是 req 和 res ，要是将二者封装到 context 一次返回就更好了！我们继续

 const ctx = this.createContext(req,res);

看一下 createContext 的具体实现

const request = require('./lib/request');
const response = require('./lib/response');
const context = require('./lib/context');

 createContext(req,res){
        
        // 创建一个新对象，继承导入的context
        const ctx = Object.create(context);
        ctx.request = Object.create(request);
        ctx.response = Object.create(response);
        // 这里的两等于判断，让使用者既可以直接使用ctx，也可以使用原生的内容
        ctx.req = ctx.request.req = req;
        ctx.res = ctx.response.res = res;
        return ctx;
    }

context.js

module.exports = {
    get url(){
        return this.request.url;
    },
    get body(){
        return this.response.body;
    },
    set body(val){
        this.response.body = val;
    }
}

request.js

module.exports = {
    get url(){
        return this.req.url;
    }
}

这里在写 context.js 时候，用到了set 与 get 函数，get 语句作为函数绑定在对象的属性上,当访问该属性时调用该函数。set 语法可以将一个函数绑定在当前对象的指定属性上，当那个属性被赋值时，你所绑定的函数就会被调用。

实现洋葱模型

compose 另一个应用场景

说洋葱模型之前先看一个函数式编程内容：compose 函数前端用过 redux 的同学肯定都很熟悉。redux 通过compose来处理 中间件 。原理是 借助数组的 reduce 对数组的参数进行迭代

// redux 中的 compose 函数

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

洋葱模型实现

再看文章开头 koa2 创建 http 服务函数，会发现多次调用 use 函数，其实这就是洋葱模型的应用。

洋葱是由很多层组成的,你可以把每个中间件看作洋葱里的一层,根据app.use的调用顺序中间件由外层到里层组成了整个洋葱,整个中间件执行过程相当于由外到内再到外地穿透整个洋葱

引用一张著名的洋葱模型图：

每次执行 use 函数，我们实际是往一个函数数组中添加了一个函数，然后再次通过一个 compose 函数，处理添加进来函数的执行顺序，也就是这个 compose 函数实现了洋葱模型机制。

具体代码实现如下:

// 其中包含一个递归
 compose(middlewares){
        return async function(ctx){// 传入上下文
            return dispatch(0);
            function dispatch(i){
                let fn = middlewares[i];
                if(!fn){
                    return Promise.resolve();
                }
                return Promise.resolve(
                    fn(ctx,function next(){
                        return dispatch(i+1)
                    })
                )
            }
        }
    }

首先执行一次 dispatch(0) 也就是默认返回第一个 app.use 传入的函数 使用 Promise 函数封装返回，其中第一个参数是我们常用的 ctx，

第二个参数就是 next 参数，next 每次执行之后都会等于下一个中间件函数，如果下一个中间件函数不为真则返回一个成功的 Promise。因此我们每次调用 next() 就是在执行下一个中间件函数。

来试试我们自己实现的koa2

使用一下我们自己的 koa2 吧，用它做一道常考洋葱模型面试题，我想文章如果懂了，输出结果应该不会错了，自己试一下！

const KKB = require('./kkb');
const app = new KKB();

app.use(async (ctx,next)=>{
    ctx.body = '1';
    await next();
    ctx.body += '3';
})

app.use(async (ctx,next)=>{
    ctx.body += '4';
    await delay();
    await next();
    ctx.body += '5';
})

app.use(async (ctx,next)=>{
    ctx.body += '6'
})

async function delay(){
    return new Promise((reslove,reject)=>{
        setTimeout(()=>{
            reslove();
        },1000);
    })
}

app.listen(3000);

解题思路:还是洋葱思想，洋葱是先从皮到心，然后从心到皮

答案: 1 4 6 5 3

补充与说明

本文目的主要是让大家学到一个koa2的基本流程，简单实现koa2，再去读源码有一个清晰的思路。实际源码中还有很多优秀的值得我们学习的点，接下来再列举一个我觉得它很优秀的点——错误处理，大家可在原有基础上继续实现，也可以去读源码继续看！加油加油

源码中 koa 继承自 Emiiter，为了处理可能在任意时间抛出的异常所以订阅了 error 事件。error 处理有两个层面，一个是 app 层面全局的（主要负责 log），另一个是一次响应过程中的 error 处理（主要决定响应的结果），koa 有一个默认 app-level 的 onerror 事件，用来输出错误日志。

 // 在调用洋葱模型函数后面，koa 会挂载一个默认的错误处理【运行时确定异常处理】
    if (!this.listenerCount("error")) this.on("error", this.onerror);
  onerror(err) {
    if (!(err instanceof Error))
      throw new TypeError(util.format("non-error thrown: %j", err));

    if (404 == err.status || err.expose) return;
    if (this.silent) return;

    const msg = err.stack || err.toString();
    console.error();
    console.error(msg.replace(/^/gm, "  "));
    console.error();
  }

通过 Emiiter 实现了错误打印，Emiiter 采用了发布订阅的设计模式，如果有对 Emiiter 有不太清楚的小伙伴可以看我这篇文章

[源码解读]一文彻底搞懂Events模块

。

总结

本文注重思想，精简版本，代码与实现都很简单。封装，递归，设计模式都说了一丢丢，希望也能对你有一丢丢的提升和让你去看一下koa2源码的想法，下篇文章见。

▼  原创系列推荐 ▼

TypeScript真香系列——接口篇

消息队列助你成为高薪 Node.js 工程师


深入理解Node.js 进程与线程(8000长文彻底搞懂)

[源码解读]一文彻底搞懂Events模块


Node.js 高级进阶之 fs 文件模块学习


Node进阶-探究不在V8堆内存中存储的Buffer对象


说Node.js做后端开发，stream有必要了解下


点在看，分享给身边的开发
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,287评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,346评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,277评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,132评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,147评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,106评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,019评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,862评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,301评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,405评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,996评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2赞 352

推荐阅读更多精彩内容

  • Koa2源码阅读笔记（一）
    阅读前所需知识 拥有Node.js语言基础 了解http模块 有Koa框架使用经验 首先看一下官方的HelloWo...
    汪汪收房租阅读 261评论 0赞 0
  • 对koa2源码的分析
    最近在学习koa2,但是自己陷入了瓶颈期。就是不知道学什么好,对未来有点迷茫。还好最近看到了知乎上的狼叔的文章 感...
    Djknight阅读 977评论 2赞 5
  • Koa2 还有多久取代 Express
    前言 Koa 是运行在 Node.js 中的 web 服务框架，小而美。 Koa2 是 Koa 框架的最新版本，K...
    let_Scott阅读 5,772评论 2赞 28
  • koa2源码解析
    Koa源码解析 整体架构 核心文件只有4个，在lib文件夹下： application.js koa框架的入口...
    Ethan_lcm阅读 2,433评论 0赞 1
  • koa2笔记
    Q1：什么是中间件 中间件（Middleware），也叫中介层，是提供系统软件和应用软件之间连接的软件，便于软件各...
    BubbleM阅读 551评论 0赞 0