Koa 是 nodejs 开发的下一代 web 开发框架，可参考 Koa 官网。说是“下一代”，其实在实际开发中早就用在项目中了。特别是 nodejs 新版本开始正式支持 async/await 语法之后，Koa2 正在被大量使用。

关于 Koa2 的基本使用和中间件机制的使用，大家可以去官网查阅和学习，本文主要讲解 Koa2 的中间件原理 —— 而且是通过非常简短的 50 行代码。代码写完之后，要能实现官网中的一段中间件示例，如下：

const Koa = require('koa');const app = new Koa();// loggerapp.use(async (ctx, next) => {  await next();  const rt = ctx.response.get('X-Response-Time');  console.log(`${ctx.method} ${ctx.url} - ${rt}`);});// x-response-timeapp.use(async (ctx, next) => {  const start = Date.now();  await next();  const ms = Date.now() - start;  ctx.set('X-Response-Time', `${ms}ms`);});// responseapp.use(async ctx => {  ctx.body = 'Hello World';});app.listen(3000);

这段代码的意图是：第一，记录服务开始的时间戳；第二，返回 hello word ；第三，记录返回之后的时间戳，然后算出时间间隔并打印。接下来我们就通过这段代码，分析一下 Koa2 的中间件实现原理。

实现 app.use

上述示例代码中，有三个app.use，从使用角度分析它的用意，其实就是注册中间件函数。因此，首先可以这样定义我们自己的 Koa 代码，新建一个like-koa2.js ，开始编写：

class LikeKoa2 {    constructor() {        this.middlewareList = []    }    // 核心方法    use(fn) {        this.middlewareList.push(fn)        return this    }}

首先定一个类，然后构造函数中初始化middelwareList 数组，用以存储所有的中间件函数。use 中接收中间件函数，然后放到middelwareList 数组中，就算是注册完成。最后return this 是为了能实现链式操作，例如app.use(fn1).use(fn2).use(fn3)，实际是否这样用看自己的需求。

实现 app.listen

示例代码的最后使用app.listen(3000) 启动服务监听，可以转化为 nodejs 原生的 http 处理方式。代码如下：

const http = require('http');class LikeKoa2 {    constructor() {        this.middlewareList = []    }    // 核心方法    use(fn) {        this.middlewareList.push(fn)        return this    }    // 将 req res 组合成为 ctx    createContext(req, res) {        // 简单模拟 koa 的 ctx ，不管细节了        const ctx = {            req,            res        }        return ctx    }    // 生成 http.createServer 需要的回调函数    callback() {        return (req, res) => {            const ctx = this.createContext(req, res)        }    }    listen(...args) {        const server = http.createServer(this.callback())        return server.listen(...args);    }}

需要简单解释两点。第一，nodejs 原生的http.createServer 需要传入一个回调函数，在callback() 中返回。第二，示例代码中中间件函数的第一个参数都是ctx ，其实可以简答理解为res 和req 的集合，通过createContext 合并一下即可。

上述代码，获取到ctx 之后，并没有做下一步处理，下文会继续解释。

compose 组合中间件

上文一开始使用use 来注册中间件，再就是用listen 去启动并监听服务，即刚开始就直接结束了。其实中间漏下很重要的一个步骤 —— 中间件组合，即如何让中间有 next 机制，将中间件一个一个的串起来。

Koa2 中通过一个compose 函数来组合中间件，以及实现了next 机制。具体代码有点绕，不太好解释，我尽量用通俗的语言、结合代码注释，解释清楚。先看代码：

// 传入中间件列表function compose(middlewareList) {    // 返回一个函数，接收 ctx （即 res 和 req 的组合）—— 记住了，下文要用    return function (ctx) {        // 定义一个派发器，这里面就实现了 next 机制        function dispatch(i) {            // 获取当前中间件            const fn = middlewareList[i]            try {                return Promise.resolve(                    // 通过 i + 1 获取下一个中间件，传递给 next 参数                    fn(ctx, dispatch.bind(null, i + 1))                )            } catch (err) {                return Promise.reject(err)            }        }        // 开始派发第一个中间件        return dispatch(0)    }}

我们按步骤解释一下上述代码。

第一，定义compose 函数，并接收中间件列表。

第二，compose 函数中返回一个函数，该函数接收ctx ，下文会用这个返回的函数。

第三，再往内部，定义了一个dispatch 函数，就是一个中间件的派发器，参数 i 就代表派发第几个中间件。执行 dispatch(0) 就是开发派发第一个中间件。

第四，派发器内部，通过 i 获取当前的中间件，然后执行。执行时传入的第一个参数是ctx ，第二个参数是 dispatch.bind(null, i + 1) 即下一个中间件函数 —— 也正好对应到示例代码中中间件的next 参数。

用Promise.resolve 封装起来，是为了保证函数执行的结果必须是Promise 类型。

就是这么多步骤，感觉自己已经解释的很详细了，但确实比较绕。如果有看不懂的同学,我建议多看几遍，或者自己亲自动手写几遍，熟练了也就掌握了。

完善 callback

有了compose 之后，callback 即可被完善起来，相关代码（并不是全部的代码）如下，其中新增的 handleRequest 看看注释应该也能明白了。

   // 处理中间件的 http 请求    handleRequest(ctx, middleWare) {        // 这个 middleWare 就是 compose 函数返回的 fn        // 执行 middleWare(ctx) 其实就是执行中间件函数，然后再用 Promise.resolve 封装并返回        return middleWare(ctx)    }    callback() {        const fn = compose(this.middlewareList)        return (req, res) => {            const ctx = this.createContext(req, res)            return this.handleRequest(ctx, fn)        }    }

完整代码

以上就是分析的全部内容，下面列出完整的代码，但希望大家不要直接拷贝，而是自己亲手写出来。

const http = require('http');// 组合中间件function compose(middlewareList) {    return function (ctx) {        function dispatch(i) {            const fn = middlewareList[i]            try {                return Promise.resolve(                    fn(ctx, dispatch.bind(null, i + 1))                )            } catch (err) {                return Promise.reject(err)            }        }        return dispatch(0)    }}class LikeKoa2 {    constructor() {        this.middlewareList = []    }    // 核心方法    use(fn) {        this.middlewareList.push(fn)        return this    }    // 处理中间件的 http 请求    handleRequest(ctx, middleWare) {        // 这个 middleWare 就是 compose 函数返回的 fn        // 执行 middleWare(ctx) 其实就是执行中间件函数，然后再用 Promise.resolve 封装并返回        return middleWare(ctx)    }    // 将 req res 组合成为 ctx    createContext(req, res) {        // 简单模拟 koa 的 ctx ，不管细节了        const ctx = {            req,            res        }        return ctx    }    callback() {        const fn = compose(this.middlewareList)        return (req, res) => {            const ctx = this.createContext(req, res)            return this.handleRequest(ctx, fn)        }    }    listen(...args) {        const server = http.createServer(this.callback())        return server.listen(...args);    }}module.exports = LikeKoa2

标题说“50行代码”其实有点夸张了，因为算上代码的空行和注释，一共 60 多行 —— 空行和注释也是代码的一部分嘛！

测试

新建一个test.js 然后开始编写：

const Koa = require('./like-koa2');const app = new Koa();// loggerapp.use(async (ctx, next) => {  await next();  const rt = ctx['X-Response-Time'];  console.log(`${ctx.req.method} ${ctx.req.url} - ${rt}`);});// x-response-timeapp.use(async (ctx, next) => {  const start = Date.now();  await next();  const ms = Date.now() - start;  ctx['X-Response-Time'] = `${ms}ms`;});// responseapp.use(async ctx => {  ctx.res.end('hello world')});app.listen(8000);

请大家注意，我们这里的代码示例和一开始官网的示例是有一些区别的，例如这里的 ctx['X-Response-Time'] 和官网示例的ctx.set('X-Response-Time', ...) 。这是因为我们的ctx 是简单的将res 和req 拼接而成，而 Koa2 中的ctx 还做了一些 API 的扩展和处理，但是这并不是我们理解中间件原理的障碍，因此可以忽略。

最后，node test.js 运行起来，然后浏览器访问http://localhost:3000 ，看控制台能否打印出日志记录。提示，nodejs 版本必须 >= 8.0 。

以上就是Koa2中间件原理的内容，另外，关于Koa2和node.jsd的进一步学习可进入我的新课《Node.js从零开发web server博客项目》，这是我的一门全栈课程，除了通过一个博客项目案例掌握Node.js核心技术之外，你还将学习到使用express和Koa2重构该项目，在实践中深入了解这两个中间站的实现原理，提高你在实际工作中的开发效率。

▼

相关推荐

面试丨前端JavaScript面试技巧

进阶丨JavaScript高级面试

能力丨Javascript 设计模式系统讲解