手把手带你造轮子系列之Koa篇（二）
概览：Koa是一个基于Node.js平台的下一代Web框架，Express的原班人马打造, 旨在为现代Web应用程序提供更有表达力更健壮的支撑。Koa的核心思想是使用ES6中的Async/Await语法解决异步流程控制问题，并采用了独特的中间件机制来处理请求和响应，使得Koa非常适合用于编写高效简洁、灵活、可扩展、易维护的Web应用程序。
此篇是Koa系列的第二篇，上一篇我们虽然实现了MiniKoa的最基本需求，但是存在很多问题，例如，在构造函数中我们用一个成员变量接收用户注册的回调事件，如果用户注册多个回调，那么我们只会保存最后一次的回调，还有我们在listen方法里面先执行了用户注册的回调函数，然后再通过handleRequest处理请求，如果用户的请求是一个异步事件，那么我们的执行顺序会出现问题，如果用户注册多个回调函数，我们又如何一次执行这些回调函数，接下来这篇主要解决上面提到的问题，较为完善的构建Koa的核心中间件系统（在Koa中注册的回调函数被称为中间件）。同样我们从一个例子出发，构建今天的需求场景。
koa示例
我们构建了一个Koa服务，添加了三个中间件，如下：
const Koa = require('./lib/application.js');
const app = new Koa();
app.use(async (ctx, next) => {
console.log(1);
await next();
console.log(2);
});
app.use(async (ctx, next) => {
console.log(3);
await next();
console.log(4);
});
app.use(async ctx => {
ctx.body = "hello world";
});
app.listen(3000, () => console.log('The service started at port 3000'));
看到上面代码的小伙伴，能够猜出代码运行，响应客户端请求的log结果是怎样的呢？这就是Koa里面最最核心的特性---中间件系统，也就是所谓的洋葱模型。接下来我们一起构建我们自己的中间件系统。
存储所有的用户回调函数
为了存储所有的用户注册回调，我们需要修改上篇中存储的代码，如下：
const http = require("http");
module.exports = class Application {
constructor() {
// this.callback = null;
this.middleware = [];
}
};
相应的use方法也需要进行修改：
use(fn) {
if(typeof fn !== 'function') throw new TypeError('middleware must be a function');
//this.callback = fn;
this.middleware.push(fn);
return this;
}
当用户使用use方法的时候我们push到this.middleware里面，然后返回this，以便我们可以链式调用。接下来我们需要修改listen方法，以便它可以处理所有中间件。
修改listen方法
listen(...args) {
// const server = http.createServer((req, res) => {
// const ctx = this.createContext(req, res);
// this.callback && this.callback(ctx);
// this.handleRequest(ctx);
// });
const server = http.createServer(this.callback())
return server.listen(...args);
}
添加callback方法
我们添加了一个callback方法，目的是把所有处理请求的逻辑封装到一起，方便后期的维护。接下来看下callback的实现。
callback() {
const fn = compose(this.middleware);
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res)
return this.handleRequest(ctx, fn)
}
return handleRequest;
}
callback是一个高阶函数，返回请求的处理方法，compose的核心逻辑是组织处理存储的所有中间件，然后同样封装ctx，而最终的处理逻辑封装在了类的handleRequest方法上。接下来我们要看最最核心的compose方法了，它是如何将所有的方法组织到一起并由用户控制执行的逻辑。
添加compose方法
module.exports = compose
function compose (middleware) {
/*
* 对参数middleware进行校验，必须是数组，并且数组的每一项必须是函数
* 否则直接抛出错误
*/
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
for (const fn of middleware) {
if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
}
return function (context, next) {
// 防止用户在一个中间件中多次调用next，index 从-1开始小于0
let index = -1
return dispatch(0)
function dispatch (i) {
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
/* 将i赋值给index，然后下面调用的时候会加1,所以下次调用dispatch时i会大于index，
*如果重复调用，第二次i的值没有增加，所以index会等于i，上面的判断即会抛出错误
*/
index = i
let fn = middleware[i]
// 用户注册的所有中间件执行完成之后，可再执行用户传入的next方法
if (i === middleware.length) fn = next
// 如果fn不存在返回一个立即成的Promise
if (!fn) return Promise.resolve()
// 添加try..catch捕获每个中间件的执行的错误
try {
/* fn执行的结果用Promise.resolve包裹，统一同步异步的处理，也方便这个函数的的使用
* @param context 依然是之前我们组装的上下文
* @param dispatch.bind(null, i + 1) 将下一个中间件的执行权交给用户，即中间件中的next参 * 数，i+1是中间件在中间件数组中的序号
*/
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}
执行compose方法返回一个返回Promise的方法fn，通过执行fn便可以启动的中间件的执行，我们把从第二个开始的中间件包装起来当做next参数传递给用户，用户可以自主调用，所以用户就可以自己控制中间件的运行流程，是不是很神奇。接下来我们要修改类的handleRequest方法：
修改handleRequest方法
// 添加参数fnMiddleware，即我们上面compose方法返回的fn
handleRequest(ctx, fnMiddleware) {
const { res, body } = ctx;
res.statusCode = body ? 200 : 404;
//return res.end(body);
const handleResponse = () => respond(ctx);
return fnMiddleware(ctx).then(handleResponse)
.catch((err) => {throw new Error(err)})
}
我们封装了respond方法专门处理所有中间件执行完成之后的逻辑，fnMiddleware方法执行返回Promise，suoyi我们可以通过then和catch分别处理成功和失败的情况。我们添加一个简单的处理逻辑，直接将用户设置的body数据调用原生的res.end方法返回给客户端。如下：
添加respond方法
function respond(ctx) {
const {res} = ctx
return res.end(ctx.body)
}
至此，我们就完成了本篇的目的，自己动手完成了Koa的核心中间件系统，小伙伴们可以试下最开始的例子，看运行的结果是否和你预期的一致。今天我们的目标已经达成，后续还会带领大家继续完善我们的MiniKoa。