源码和测试代码放在了:dongyuanxin/simple-koa
准备
设计思想和第三方库原理都在前 2 篇详细说明了。这篇主要目的是做一个验证检验,在语法使用 ES6/7 的语法。
在开始前,安装一下需要用到的库:
1
| npm install --save koa-compose koa-convert is-generator-function
|
测试文件
为了说明效果,先按照正常使用 koa 的逻辑编写了测试文件。当启动它的时候,它的预期行为是:
- 监听 3000 端口
- 加载中间件
- 浏览器访问
localhost:3000
,屏幕打印hello
- 服务器的控制台依次输出:1inner => 2innter => 2outer => 1outer
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| const Koa = require("./lib/application"); const server = new Koa(); async function middleware1(ctx, next) { console.log("1 inner"); await next(); console.log("1 outer"); } async function middleware2(ctx, next) { ctx.res.body = "hello"; console.log("2 inner"); await next(); console.log("2 outer"); } server.use(middleware1); server.use(middleware2); server.listen(3000);
|
玩具 koa
只准备了一个文件,跑通上面的逻辑即可。文件是 lib/application.js
。
构造函数
首先对外暴露的就是一个继承 Emitter 的 Application 类。整体框架如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| const http = require("http"); const Emitter = require("events"); const compose = require("koa-compose"); module.exports = class Application extends Emitter { constructor() { super(); this.middleware = []; this.context = {}; this.request = {}; this.response = {}; } listen(...args) {} use(fn) {} callback() {} handleRequest(ctx, fnMiddleware) {} createContext(req, res) {} onerror(error) { console.log(`error occurs: ${error.message}`); } };
|
继承 Emitter 事件类,是为了方便监听和处理报错。
use
将外面传入的中间件保存起来:
1 2 3 4 5
| use (fn) { this.middleware.push(fn) return this }
|
createContext
主要用于创建上下文。外面可以通过访问 ctx 上的 req/res 拿到请求或者返回信息。
1 2 3 4 5 6 7 8 9 10
| createContext (req, res) { const context = Object.create(this.context) context.request = Object.create(this.request) context.response = Object.create(this.response) context.req = req context.res = res context.app = this context.state = {} return context }
|
listen 和 callback
监听端口,启动服务器:
1 2 3 4 5 6 7 8 9 10 11 12
| listen (...args) { const server = http.createServer(this.callback()) return server.listen(...args) }, callback () { const fn = compose(this.middleware) this.on('error', this.onerror) return (req, res) => { const ctx = this.createContext(req, res) return this.handleRequest(ctx, fn) } }
|
handleRequest
在 callback
方法中真是返回的内容,它的作用就是:处理请求,并且返回给客户端。
1 2 3 4 5 6 7 8 9 10
| handleRequest(ctx, fnMiddleware) { const res = ctx.res const handleResponse = () => { res.end(res.body) } return fnMiddleware(ctx) .then(handleResponse) .catch(this.onerror) }
|
效果截图
启动 index.js 后,在浏览器访问本地 3000
端口(图片已挂):
回到控制台,查看中间件的输出顺序是否正确(图片已挂):