从头实现一个koa框架

时间  2019-11-06
标签 从头 实现 一个 koa 框架 繁體版
原文   原文链接
欢迎去个人博客观看： https://github.com/mly-zju/blog/issues/9

koa.js是最流行的node.js后端框架之一，有不少网站都使用koa进行开发，同时社区也涌现出了一大批基于koa封装的企业级框架。然而，在这些亮眼的成绩背后，做为核心引擎的koa代码库自己，却很是的精简，不得不让人惊叹于其巧妙的设计。javascript

在平时的工做开发中，笔者是koa的重度用户，所以对其背后的原理天然也是很是感兴趣，所以在闲暇之余进行了研究。不过本篇文章，并非源码分析，而是从相反的角度，向你们展现如何从头开发实现一个koa框架，在这个过程当中，koa中最重要的几个概念和原理都会获得展示。相信你们在看完本文以后，会对koa有一个更深刻的理解，同时在阅读本文以后再去阅读koa源码，思路也将很是的顺畅。java

首先放出笔者实现的这个koa框架代码库地址：simpleKoanode

须要说明的是，本文实现的koa是koa 2版本，也就是基于async/await的，所以须要node版本在7.6以上。若是读者的node版本较低，建议升级，或者安装babel-cli，利用其中的babel-node来运行例子。git

四条主线

笔者认为，理解koa，主要须要搞懂四条主线，其实也是实现koa的四个步骤，分别是github

  1. 封装node http Server
  2. 构造resquest, response, context对象
  3. 中间件机制
  4. 错误处理

下面就一一进行分析。json

主线一：封装node http Server: 从hello world提及

首先，不考虑框架，若是使用原生http模块来实现一个返回hello world的后端app，代码以下：后端

let http = require('http');

let server = http.createServer((req, res) => {
    res.writeHead(200);
    res.end('hello world');
});

server.listen(3000, () => {
    console.log('listenning on 3000');
});

实现koa的第一步，就是对这个原生的过程进行封装，为此，咱们首先建立application.js实现一个Application对象：api

// application.js
let http = require('http');

class Application {

    /**
     * 构造函数
     */
    constructor() {
        this.callbackFunc;
    }

    /**
     * 开启http server并传入callback
     */
    listen(...args) {
        let server = http.createServer(this.callback());
        server.listen(...args);
    }

    /**
     * 挂载回调函数
     * @param {Function} fn 回调处理函数
     */
    use(fn) {
        this.callbackFunc = fn;
    }

    /**
     * 获取http server所需的callback函数
     * @return {Function} fn
     */
    callback() {
        return (req, res) => {
            this.callbackFunc(req, res);
        };
    }

}

module.exports = Application;

而后建立example.js:数组

let simpleKoa = require('./application');
let app = new simpleKoa();

app.use((req, res) => {
    res.writeHead(200);
    res.end('hello world');
});

app.listen(3000, () => {
    console.log('listening on 3000');
});

能够看到，咱们已经初步完成了对于http server的封装，主要实现了app.use注册回调函数，app.listen语法糖开启server并传入回调函数了，典型的koa风格。promise

可是美中不足的是，咱们传入的回调函数，参数依然使用的是req和res，也就是node原生的request和response对象，这些原生对象和api提供的方法不够便捷，不符合一个框架须要提供的易用性。所以，咱们须要进入第二条主线了。

主线二：构造request, response, context对象

若是阅读koa文档，会发现koa有三个重要的对象，分别是request, response, context。其中request是对node原生的request的封装，response是对node原生response对象的封装，context对象则是回调函数上下文对象，挂载了koa request和response对象。下面咱们一一来讲明。

首先要明确的是，对于koa的request和response对象，只是提供了对node原生request和response对象的一些方法的封装，明确了这一点，咱们的思路是，使用js的getter和setter属性，基于node的对象req/res对象封装koa的request/response对象。

规划一下咱们要封装哪些易用的方法。这里在文章中为了易懂，姑且只实现如下方法：

对于simpleKoa request对象，实现query读取方法，可以读取到url中的参数，返回一个对象。

对于simpleKoa response对象，实现status读写方法，分别是读取和设置http response的状态码，以及body方法，用于构造返回信息。

而simpleKoa context对象，则挂载了request和response对象，并对一些经常使用方法进行了代理。

首先建立request.js:

// request.js
let url = require('url');

module.exports = {

    get query() {
        return url.parse(this.req.url, true).query;
    }

};

很简单，就是导出了一个对象，其中包含了一个query的读取方法，经过url.parse方法解析url中的参数，并以对象的形式返回。须要注意的是，代码中的this.req表明的是node的原生request对象，this.req.url就是node原生request中获取url的方法。稍后咱们修改application.js的时候，会为koa的request对象挂载这个req。

而后建立response.js:

// response.js
module.exports = {

    get body() {
        return this._body;
    },

    /**
     * 设置返回给客户端的body内容
     *
     * @param {mixed} data body内容
     */
    set body(data) {
        this._body = data;
    },

    get status() {
        return this.res.statusCode;
    },

    /**
     * 设置返回给客户端的stausCode
     *
     * @param {number} statusCode 状态码
     */
    set status(statusCode) {
        if (typeof statusCode !== 'number') {
            throw new Error('statusCode must be a number!');
        }
        this.res.statusCode = statusCode;
    }

};

也很简单。status读写方法分别设置或读取this.res.statusCode。一样的，这个this.res是挂载的node原生response对象。而body读写方法分别设置、读取一个名为this._body的属性。这里设置body的时候并无直接调用this.res.end来返回信息，这是考虑到koa当中咱们可能会屡次调用response的body方法覆盖性设置数据。真正的返回消息操做会在application.js中存在。

而后咱们建立context.js文件，构造context对象的原型：

// context.js
module.exports = {

    get query() {
        return this.request.query;
    },

    get body() {
        return this.response.body;
    },

    set body(data) {
        this.response.body = data;
    },

    get status() {
        return this.response.status;
    },

    set status(statusCode) {
        this.response.status = statusCode;
    }

};

能够看到主要是作一些经常使用方法的代理，经过context.query直接代理了context.request.query，context.body和context.status代理了context.response.body与context.response.status。而context.request，context.response则会在application.js中挂载。

因为context对象定义比较简单而且规范，当实现更多代理方法时候，这样一个一个经过声明的方式显然有点笨，js中，设置setter/getter，能够经过对象的__defineSetter__和__defineSetter__来实现。为此，咱们精简了上面的context.js实现方法，精简版本以下：

let proto = {};

// 为proto名为property的属性设置setter
function delegateSet(property, name) {
    proto.__defineSetter__(name, function (val) {
        this[property][name] = val;
    });
}

// 为proto名为property的属性设置getter
function delegateGet(property, name) {
    proto.__defineGetter__(name, function () {
        return this[property][name];
    });
}

// 定义request中要代理的setter和getter
let requestSet = [];
let requestGet = ['query'];

// 定义response中要代理的setter和getter
let responseSet = ['body', 'status'];
let responseGet = responseSet;

requestSet.forEach(ele => {
    delegateSet('request', ele);
});

requestGet.forEach(ele => {
    delegateGet('request', ele);
});

responseSet.forEach(ele => {
    delegateSet('response', ele);
});

responseGet.forEach(ele => {
    delegateGet('response', ele);
});

module.exports = proto;

这样，当咱们但愿代理更多request和response方法的时候，能够直接向requestGet/requestSet/responseGet/responseSet数组中添加method的名称便可（前提是在request和response中实现了）。

最后让咱们来修改application.js，基于刚才的3个对象原型来建立request, response, context对象：

// application.js
let http = require('http');
let context = require('./context');
let request = require('./request');
let response = require('./response');

class Application {

    /**
     * 构造函数
     */
    constructor() {
        this.callbackFunc;
        this.context = context;
        this.request = request;
        this.response = response;
    }

    /**
     * 开启http server并传入callback
     */
    listen(...args) {
        let server = http.createServer(this.callback());
        server.listen(...args);
    }

    /**
     * 挂载回调函数
     * @param {Function} fn 回调处理函数
     */
    use(fn) {
        this.callbackFunc = fn;
    }

    /**
     * 获取http server所需的callback函数
     * @return {Function} fn
     */
    callback() {
        return (req, res) => {
            let ctx = this.createContext(req, res);
            let respond = () => this.responseBody(ctx);
            this.callbackFunc(ctx).then(respond);
        };
    }

    /**
     * 构造ctx
     * @param {Object} req node req实例
     * @param {Object} res node res实例
     * @return {Object} ctx实例
     */
    createContext(req, res) {
        // 针对每一个请求，都要建立ctx对象
        let ctx = Object.create(this.context);
        ctx.request = Object.create(this.request);
        ctx.response = Object.create(this.response);
        ctx.req = ctx.request.req = req;
        ctx.res = ctx.response.res = res;
        return ctx;
    }

    /**
     * 对客户端消息进行回复
     * @param {Object} ctx ctx实例
     */
    responseBody(ctx) {
        let content = ctx.body;
        if (typeof content === 'string') {
            ctx.res.end(content);
        }
        else if (typeof content === 'object') {
            ctx.res.end(JSON.stringify(content));
        }
    }

}

能够看到，最主要的是增长了createContext方法，基于咱们以前建立的context 为原型，使用Object.create(this.context)方法建立了ctx，并一样经过Object.create(this.request)和Object.create(this.response)建立了request/response对象并挂在到了ctx对象上面。此外，还将原生node的req/res对象挂载到了ctx.request.req/ctx.req和ctx.response.res/ctx.res对象上。

回过头去看咱们以前的context/request/response.js文件，就能知道当时使用的this.res或者this.response之类的是从哪里来的了，原来是在这个createContext方法中挂载到了对应的实例上。一张图来讲明其中的关系：

构建了运行时上下文ctx以后，咱们的app.use回调函数参数就都基于ctx了。

下面一张图描述了ctx对象的结构和继承关系：

clipboard.png

最后回忆咱们的ctx.body方法，并无直接返回消息体，而是将消息存储在了一个变量属性中。为了每次回调函数处理结束以后返回消息，咱们建立了responseBody方法，主要做用就是经过ctx.body读取存储的消息，而后调用ctx.res.end返回消息并关闭链接。从方法中知道，咱们的body消息体能够是字符串，也能够是对象（会序列化为字符串返回）。注意这个方法的调用是在回调函数结束以后调用的，而咱们的回调函数是一个async函数，其执行结束后会返回一个Promise对象，所以咱们只须要在其后经过.then方法调用咱们的responseBody便可，这就是this.callbackFunc(ctx).then(respond)的意义。

而后咱们来测试一下目前为止的框架。修改example.js以下：

let simpleKoa = require('./application');
let app = new simpleKoa();

app.use(async ctx => {
    ctx.body = 'hello ' + ctx.query.name;
});

app.listen(3000, () => {
    console.log('listening on 3000');
});

能够看到这个时候咱们经过app.use传入的已经再也不是原生的function (req, res)回调函数，而是koa2中的async函数，接收ctx做为参数。为了测试，在浏览器访问localhost:3000?name=tom，能够看到返回了'hello tom'，符合预期。

这里再插入分析一个知识概念。从刚才的实现中，咱们知道了this.context是咱们的中间件中上下文ctx对象的原型。所以在实际开发中，咱们能够将一些经常使用的方法挂载到this.context上面，这样，在中间件ctx中，咱们也能够方便的使用这些方法了，这个概念就叫作ctx的扩展，一个例子是阿里的egg.js框架已经把这个扩展机制做为一部分，融入到了框架开发中。

下面就展现一个例子，咱们写一个echoData的方法做为扩展，传入errno, data, errmsg，可以给客户端返回结构化的消息结果：

let SimpleKoa = require('./application');
let app = new SimpleKoa();

// 对ctx进行扩展
app.context.echoData = function (errno = 0, data = null, errmsg = '') {
    this.res.setHeader('Content-Type', 'application/json;charset=utf-8');
    this.body = {
        errno: errno,
        data: data,
        errmsg: errmsg
    };
};

app.use(async ctx => {
    let data = {
        name: 'tom',
        age: 16,
        sex: 'male'
    }
    // 这里使用扩展，方便的返回utf-8格式编码，带有errno和errmsg的消息体
    ctx.echoData(0, data, 'success');
});

app.listen(3000, () => {
    console.log('listenning on 3000');
});

主线三：中间件机制

到目前为止，咱们成功封装了http server，并构造了context, request, response对象。但最重要的一条主线却尚未实现，那就是koa的中间件机制。

关于koa的中间件洋葱执行模型，koa 1中使用的是generator + co.js执行的方式，koa 2中则使用了async/await。关于koa 1中的中间件原理，我曾写过一篇文章进行解释，请移步：深刻探析koa之中间件流程控制篇

这里咱们实现的是基于koa 2的，所以再描述一下原理。为了便于理解，假设咱们有3个async函数:

async function m1(next) {
    console.log('m1');
    await next();
}

async function m2(next) {
    console.log('m2');
    await next();
}

async function m3() {
    console.log('m3');
}

咱们但愿可以构造出一个函数，实现的效果是让三个函数依次执行。首先考虑想让m2执行完毕后，await next()去执行m3函数，那么显然，须要构造一个next函数，做用是调用m3，而后做为参数传给m2

let next1 = async function () {
    await m3();
}

m2(next1);

// 输出：m2,m3

进一步，考虑从m1开始执行，那么，m1的next参数须要是一个执行m2的函数，而且给m2传入的参数是m3,下面来模拟：

let next1 = async function () {
    await m3();
}

let next2 = async function () {
    await m2(next1);
}

m1(next2);

// 输出：m1,m2,m3

那么对于n个async函数，但愿他们按顺序依次执行呢？能够看到，产生nextn的过程可以抽象为一个函数：

function createNext(middleware, oldNext) {
    return async function () {
        await middleware(oldNext);
    }
}

let next1 = createNext(m3, null);
let next2 = createNext(m2, next1);
let next3 = createNext(m1, next2);

next3();

// 输出m1, m2, m3

进一步精简：

let middlewares = [m1, m2, m3];
let len = middlewares.length;

// 最后一个中间件的next设置为一个当即resolve的promise函数
let next = async function () {
    return Promise.resolve();
}
for (let i = len - 1; i >= 0; i--) {
    next = createNext(middlewares[i], next);
}

next();

// 输出m1, m2, m3

至此，咱们也有了koa中间件机制实现的思路，新的application.js以下：

/**
 * @file simpleKoa application对象
 */
let http = require('http');
let context = require('./context');
let request = require('./request');
let response = require('.//response');

class Application {

    /**
     * 构造函数
     */
    constructor() {
        this.middlewares = [];
        this.context = context;
        this.request = request;
        this.response = response;
    }

    // ...省略中间 

    /**
     * 中间件挂载
     * @param {Function} middleware 中间件函数
     */
    use(middleware) {
        this.middlewares.push(middleware);
    }

    /**
     * 中间件合并方法，将中间件数组合并为一个中间件
     * @return {Function}
     */
    compose() {
        // 将middlewares合并为一个函数，该函数接收一个ctx对象
        return async ctx => {

            function createNext(middleware, oldNext) {
                return async () => {
                    await middleware(ctx, oldNext);
                }
            }

            let len = this.middlewares.length;
            let next = async () => {
                return Promise.resolve();
            };
            for (let i = len - 1; i >= 0; i--) {
                let currentMiddleware = this.middlewares[i];
                next = createNext(currentMiddleware, next);
            }

            await next();
        };
    }

    /**
     * 获取http server所需的callback函数
     * @return {Function} fn
     */
    callback() {
        return (req, res) => {
            let ctx = this.createContext(req, res);
            let respond = () => this.responseBody(ctx);
            let fn = this.compose();
            return fn(ctx).then(respond);
        };
    }

    // ...省略后面 

}

module.exports = Application;

能够看到，首先对app.use进行改造了，每次调用app.use，就向this.middlewares中push一个回调函数。而后增长了一个compose()方法，利用咱们前文分析的原理，对middlewares数组中的函数进行组装，返回一个最终的函数。最后，在callback()方法中，调用compose()获得最终回调函数，并执行。

改写example.js验证一下中间件机制：

let simpleKoa = require('./application');
let app = new simpleKoa();

let responseData = {};

app.use(async (ctx, next) => {
    responseData.name = 'tom';
    await next();
    ctx.body = responseData;
});

app.use(async (ctx, next) => {
    responseData.age = 16;
    await next();
});

app.use(async ctx => {
    responseData.sex = 'male';
});

app.listen(3000, () => {
    console.log('listening on 3000');
});

// 返回{ name: "tom", age: 16, sex: "male"}

例子中一共三个中间件，分别对responseData增长了name, age, sex属性，最后返回该数据。

至此，一个koa框架基本已经浮出水面了，不过咱们还须要进行最后一个主线的分析：错误处理。

主线四：错误处理

一个健壮的框架，必须保证在发生错误的时候，可以捕获错误并有降级方案返回给客户端。但显然如今咱们的框架还作不到这一点，假设咱们修改一下例子，咱们的中间件中，有一个发生错误抛出了异常：

let simpleKoa = require('./application');
let app = new simpleKoa();

let responseData = {};
app.use(async (ctx, next) => {
    responseData.name = 'tom';
    await next();
    ctx.body = responseData;
});

app.use(async (ctx, next) => {
    responseData.age = 16;
    await next();
});

app.use(async ctx => {
    responseData.sex = 'male';
    // 这里发生了错误，抛出了异常
    throw new Error('oooops');
});

app.listen(3000, () => {
    console.log('listening on 3000');
});

这个时候访问浏览器，是得不到任何响应的，这是由于异常并无被咱们的框架捕获并进行降级处理。回顾咱们application.js中的中间件执行代码：

// application.js
// ...
    callback() {
        return (req, res) => {
            let ctx = this.createContext(req, res);
            let respond = () => this.responseBody(ctx);
            let fn = this.compose();
            return fn(ctx).then(respond);
        };
    }
// ...

其中咱们知道，fn是一个async函数，执行后返回一个promise，回想promise的错误处理是怎样的？没错，咱们只须要定义一个onerror函数，里面进行错误发生时候的降级处理，而后在promise的catch方法中引用这个函数便可。

于此同时，回顾koa框架，咱们知道在错误发生的时候，app对象能够经过app.on('error', callback)订阅错误事件，这有助于咱们几种处理错误，好比打印日志之类的操做。为此，咱们也要对Application对象进行改造，让其继承nodejs中的events对象，而后在onerror方法中emit错误事件。改造后的application.js以下：

/**
 * @file simpleKoa application对象
 */

let EventEmitter = require('events');
let http = require('http');
let context = require('./context');
let request = require('./request');
let response = require('./response');

class Application extends EventEmitter {

    /**
     * 构造函数
     */
    constructor() {
        super();
        this.middlewares = [];
        this.context = context;
        this.request = request;
        this.response = response;
    }

    // ...

    /**
     * 获取http server所需的callback函数
     * @return {Function} fn
     */
    callback() {
        return (req, res) => {
            let ctx = this.createContext(req, res);
            let respond = () => this.responseBody(ctx);
            let onerror = (err) => this.onerror(err, ctx);
            let fn = this.compose();
            // 在这里catch异常，调用onerror方法处理异常
            return fn(ctx).then(respond).catch(onerror);
        };
    }

    // ... 

    /**
     * 错误处理
     * @param {Object} err Error对象
     * @param {Object} ctx ctx实例
     */
    onerror(err, ctx) {
        if (err.code === 'ENOENT') {
            ctx.status = 404;
        }
        else {
            ctx.status = 500;
        }
        let msg = err.message || 'Internal error';
        ctx.res.end(msg);
        // 触发error事件
        this.emit('error', err);
    }

}

module.exports = Application;

能够看到，onerror方法的对异常的处理主要是获取异常状态码，当err.code为'ENOENT'的时候，返回的消息头设置为404，不然默认设置为500，而后消息体设置为err.message，若是异常中message属性为空，则默认消息体设置为'Internal error'。此后调用ctx.res.end返回消息，这样就能保证即便异常状况下，客户端也能收到返回值。最后经过this.emit出发error事件。

而后咱们写一个example来验证错误处理：

let simpleKoa = require('./application');
let app = new simpleKoa();

app.use(async ctx => {
    throw new Error('ooops');
});

app.on('error', (err) => {
    console.log(err.stack);
});

app.listen(3000, () => {
    console.log('listening on 3000');
});

浏览器访问'localhost:3000'的时候，获得返回'ooops'，同时http状态码为500 。同时app.on('error')订阅到了异常事件，在回调函数中打印出了错误栈信息。

关于错误处理，这里多说一点。虽然koa中内置了错误处理机制，可是实际业务开发中，咱们每每但愿可以自定义错误处理方式，这个时候，比较好的办法是在最开头增长一个错误捕获中间件，而后根据错误进行定制化的处理，好比：

// 错误处理中间件
app.use(async (ctx, next) => {
    try {
        await next();
    }
    catch (err) {
        // 在这里进行定制化的错误处理
    }
});
// ...其余中间件

至此，咱们就完整实现了一个轻量版的koa框架。

结语

完整的simpleKoa代码库地址为：simpleKoa，里面还附带了一些example。

理解了这个轻量版koa的实现原理，读者还能够去看看koa的源码，会发现机制和咱们实现的框架是很是相似的，无非是多了一些细节，好比说，完整koa的context/request/response方法上面挂载了更多好用的method，或者不少方法中容错处理更好等等。具体在本文中就不展开讲了，留给感兴趣的读者去探索吧~。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程