15 |
20 |
21 |
22 |
16 |
19 | hello world
8 | 9 | 10 | -------------------------------------------------------------------------------- /demo/chapter-04-03/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |hello world
8 | 9 | 10 | -------------------------------------------------------------------------------- /demo/chapter-04-02/example.js: -------------------------------------------------------------------------------- 1 | const send = require('./index'); 2 | const Koa = require('koa'); 3 | const app = new Koa(); 4 | 5 | app.use(async ctx => { 6 | await send(ctx, ctx.path, { root: `${__dirname}/public` }); 7 | }); 8 | 9 | app.listen(3000); 10 | console.log('listening on port 3000'); 11 | -------------------------------------------------------------------------------- /demo/chapter-01-07/example.js: -------------------------------------------------------------------------------- 1 | const SimpleKoa = require('./index'); 2 | 3 | const app = new SimpleKoa(); 4 | const PORT = 3001; 5 | 6 | app.use(async ctx => { 7 | ctx.body = 'this is a body
'; 8 | }); 9 | 10 | app.listen(PORT, () => { 11 | console.log(`the web server is starting at port ${PORT}`); 12 | }); 13 | -------------------------------------------------------------------------------- /demo/chapter-04-01/example.js: -------------------------------------------------------------------------------- 1 | const Koa = require('koa'); 2 | const logger = require('./index'); 3 | const app = new Koa(); 4 | 5 | app.use(logger); 6 | 7 | app.use(async(ctx, next) => { 8 | ctx.body = 'hello world'; 9 | }); 10 | 11 | app.listen(3000, () => { 12 | console.log('[demo] is starting at port 3000'); 13 | }); -------------------------------------------------------------------------------- /note/chapter01/01.md: -------------------------------------------------------------------------------- 1 | # 学习准备 2 | 3 | ## 知识储备 4 | 5 | - Node.js 的基础知识 6 | - `http` 模块的使用 7 | - `fs` 模块使用 8 | - `path` 模块使用 9 | - `Buffer` 类型 10 | - ES 的基础知识 11 | - `Promise` 12 | - `async/await` 13 | - 其他知识 14 | - `HTTP` 协议 15 | - `Cookie` 原理 16 | 17 | ## 环境准备 18 | 19 | - Linux/Mac 开发环境 20 | - nvm 管理 Node.js 版本 -------------------------------------------------------------------------------- /demo/chapter-04-01/index.js: -------------------------------------------------------------------------------- 1 | const logger = async function(ctx, next) { 2 | let res = ctx.res; 3 | 4 | // 拦截操作请求 request 5 | console.log(`<-- ${ctx.method} ${ctx.url}`); 6 | 7 | await next(); 8 | 9 | // 拦截操作响应 request 10 | res.on('finish', () => { 11 | console.log(`--> ${ctx.method} ${ctx.url}`); 12 | }); 13 | }; 14 | 15 | module.exports = logger 16 | -------------------------------------------------------------------------------- /demo/chapter-05-02/example.js: -------------------------------------------------------------------------------- 1 | const Koa = require('koa'); 2 | const jsonp = require('./index'); 3 | const app = new Koa(); 4 | 5 | jsonp(app, {}); 6 | 7 | app.use(async ctx => { 8 | await ctx.jsonp({ 9 | data: 'this is a demo', 10 | success: true 11 | }); 12 | }); 13 | 14 | app.listen(3000, () => { 15 | console.log('[demo] jsonp is starting at port 3000'); 16 | }); 17 | -------------------------------------------------------------------------------- /demo/chapter-05-03/example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |form post demo
8 | 13 |line 1
'); 8 | }); 9 | 10 | app.use(ctx => { 11 | ctx.res.write('line 2
'); 12 | }); 13 | 14 | app.use(ctx => { 15 | ctx.res.write('line 3
'); 16 | }); 17 | 18 | app.listen(PORT, () => { 19 | console.log(`the web server is starting at port ${PORT}`); 20 | }); 21 | -------------------------------------------------------------------------------- /demo/chapter-05-01/example.js: -------------------------------------------------------------------------------- 1 | const Koa = require('koa'); 2 | const path = require('path'); 3 | const view = require('./index'); 4 | const app = new Koa(); 5 | 6 | view(app, { 7 | baseDir: path.join(__dirname, 'views') 8 | }); 9 | 10 | app.use(async ctx => { 11 | await ctx.view(`${ctx.path}.html`, { 12 | title: 'index page' 13 | }); 14 | }); 15 | 16 | app.listen(3000, () => { 17 | console.log('[demo] view is starting at port 3000'); 18 | }); 19 | -------------------------------------------------------------------------------- /demo/chapter-05-01/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | 4 | function view(app, opts = {}) { 5 | const {baseDir = ''} = opts; 6 | 7 | app.context.view = function(page = '', obj = {}) { 8 | let ctx = this; 9 | let filePath = path.join(baseDir, page); 10 | if (fs.existsSync(filePath)) { 11 | let tpl = fs.readFileSync(filePath, 'binary'); 12 | ctx.body = tpl; 13 | } else { 14 | ctx.throw(404); 15 | } 16 | }; 17 | } 18 | 19 | module.exports = view; 20 | -------------------------------------------------------------------------------- /demo/chapter-06-02/example.js: -------------------------------------------------------------------------------- 1 | const mount = require('./index'); 2 | const Koa = require('koa'); 3 | 4 | const app1 = new Koa(); 5 | const app2 = new Koa(); 6 | 7 | app1.use(async(ctx, next) => { 8 | await next(); 9 | ctx.body = 'app 1'; 10 | }); 11 | 12 | app2.use(async(ctx, next) => { 13 | await next(); 14 | ctx.body = 'app 2'; 15 | }); 16 | 17 | const app = new Koa(); 18 | 19 | app.use(mount('/app1', app1)); 20 | app.use(mount('/app2', app2)); 21 | 22 | app.listen(3000); 23 | console.log('listening on port 3000'); 24 | -------------------------------------------------------------------------------- /demo/chapter-middleware/example/003.js: -------------------------------------------------------------------------------- 1 | // 003 2 | 3 | const Koa = require('koa'); 4 | const app = new Koa(); 5 | 6 | const middleware = async function(ctx, next) { 7 | const routes = [ 8 | { 9 | method: 'GET', 10 | path: '/index', 11 | middleware: async function(ctx, next){ 12 | ctx.body = '${JSON.stringify(serverInfo)}
38 | 39 | 40 | `; 41 | } 42 | 43 | app.use(page); 44 | 45 | app.listen(3001, function(){ 46 | console.log('the demo is start at port 3001'); 47 | }) -------------------------------------------------------------------------------- /demo/chapter-03-02/ctx.js: -------------------------------------------------------------------------------- 1 | const Koa = require('koa'); 2 | let app = new Koa(); 3 | 4 | const middleware = async function(ctx, next) { 5 | // 中间件 挂载上下文 6 | // 把所有当前服务的进程PID，内存使用情况方法挂载在ctx上 7 | ctx.getServerInfo = function() { 8 | function parseMem( mem = 0 ) { 9 | let memVal = mem / 1024 / 1024; 10 | memVal = memVal.toFixed(2) + 'MB'; 11 | return memVal; 12 | } 13 | 14 | function getMemInfo() { 15 | let memUsage = process.memoryUsage(); 16 | let rss = parseMem(memUsage.rss); 17 | let heapTotal = parseMem(memUsage.heapTotal); 18 | let heapUsed = parseMem(memUsage.heapUsed); 19 | return { 20 | pid: process.pid, 21 | rss, 22 | heapTotal, 23 | heapUsed 24 | } 25 | } 26 | return getMemInfo() 27 | }; 28 | await next(); 29 | } 30 | 31 | const page = async function(ctx, next) { 32 | const serverInfo = ctx.getServerInfo(); 33 | ctx.body = ` 34 | 35 | 36 | 37 |${JSON.stringify(serverInfo)}
38 | 39 | 40 | `; 41 | } 42 | 43 | app.use(middleware); 44 | app.use(page); 45 | 46 | app.listen(3001, function(){ 47 | console.log('the demo is start at port 3001'); 48 | }) -------------------------------------------------------------------------------- /demo/chapter-04-03/index.js: -------------------------------------------------------------------------------- 1 | const {resolve} = require('path'); 2 | const send = require('./send'); 3 | 4 | function statics(opts = { 5 | root: '' 6 | }) { 7 | opts.root = resolve(opts.root); 8 | 9 | // 是否需要等待其他请求 10 | if (opts.defer !== true) { 11 | // 如果需要等待其他请求 12 | return async function statics(ctx, next) { 13 | let done = false; 14 | 15 | if (ctx.method === 'HEAD' || ctx.method === 'GET') { 16 | try { 17 | await send(ctx, ctx.path, opts); 18 | done = true; 19 | } catch (err) { 20 | if (err.status !== 404) { 21 | throw err; 22 | } 23 | } 24 | } 25 | 26 | if (!done) { 27 | await next(); 28 | } 29 | }; 30 | } else { 31 | // 如果不需要等待其他请求 32 | return async function statics(ctx, next) { 33 | await next(); 34 | 35 | if (ctx.method !== 'HEAD' && ctx.method !== 'GET') { 36 | return; 37 | } 38 | 39 | if (ctx.body != null || ctx.status !== 404) { 40 | return; 41 | } 42 | 43 | try { 44 | await send(ctx, ctx.path, opts); 45 | } catch (err) { 46 | if (err.status !== 404) { 47 | throw err; 48 | } 49 | } 50 | }; 51 | } 52 | } 53 | 54 | module.exports = statics; 55 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | * [Koa.js 设计模式-学习笔记](README.md) 3 | * [1. Koa.js 原理] 4 | * [1.1 学习准备](note/chapter01/01.md) 5 | * [1.2 Promise 使用](note/chapter01/02.md) 6 | * [1.3 async/await 使用](note/chapter01/03.md) 7 | * [1.4 Node.js原生http模块](note/chapter01/04.md) 8 | * [1.5 中间件引擎](note/chapter01/05.md) 9 | * [1.6 普通中间件式HTTP服务实现](note/chapter01/06.md) 10 | * [1.7 最简Koa.js实现](note/chapter01/07.md) 11 | * [2. Koa.js 的AOP设计] 12 | * [2.1 AOP面向切面编程](note/chapter02/01.md) 13 | * [2.2 洋葱模型切面](note/chapter02/02.md) 14 | * [2.3 HTTP切面流程](note/chapter02/03.md) 15 | * [3. Koa.js 中间件] 16 | * [3.1 中间件分类](note/chapter03/01.md) 17 | * [3.2 狭义中间件](note/chapter03/02.md) 18 | * [3.3 广义中间件](note/chapter03/03.md) 19 | * [4. 狭义中间件-请求/响应拦截] 20 | * [4.1 koa-logger 实现](note/chapter04/01.md) 21 | * [4.2 koa-send 实现](note/chapter04/02.md) 22 | * [4.3 koa-static 实现](note/chapter04/03.md) 23 | * [5. 狭义中间件-context代理] 24 | * [5.1 koa-view 实现](note/chapter05/01.md) 25 | * [5.2 koa-jsonp 实现](note/chapter05/02.md) 26 | * [5.3 koa-bodyparser 实现](note/chapter05/03.md) 27 | * [6. 广义中间件-间接中间件处理] 28 | * [6.1 koa-router 实现](note/chapter06/01.md) 29 | * [6.2 koa-mount 实现](note/chapter06/02.md) 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /demo/chapter-05-03/index.js: -------------------------------------------------------------------------------- 1 | const readStream = require('./lib/read_stream'); 2 | let strictJSONReg = /^[\x20\x09\x0a\x0d]*(\[|\{)/; 3 | 4 | let jsonTypes = [ 5 | 'application/json' 6 | ]; 7 | 8 | let formTypes = [ 9 | 'application/x-www-form-urlencoded' 10 | ]; 11 | 12 | let textTypes = [ 13 | 'text/plain' 14 | ]; 15 | 16 | function parseQueryStr(queryStr) { 17 | let queryData = {}; 18 | let queryStrList = queryStr.split('&'); 19 | for (let [ index, queryStr ] of queryStrList.entries()) { 20 | let itemList = queryStr.split('='); 21 | queryData[ itemList[0] ] = decodeURIComponent(itemList[1]); 22 | } 23 | return queryData; 24 | } 25 | 26 | function bodyParser(opts = {}) { 27 | return async function(ctx, next) { 28 | if (!ctx.request.body && ctx.method === 'POST') { 29 | let body = await readStream(ctx.request.req); 30 | let result = body; 31 | if (ctx.request.is(formTypes)) { 32 | result = parseQueryStr(body); 33 | } else if (ctx.request.is(jsonTypes)) { 34 | if (strictJSONReg.test(body)) { 35 | try { 36 | result = JSON.parse(body); 37 | } catch (err) { 38 | ctx.throw(500, err); 39 | } 40 | } 41 | } else if (ctx.request.is(textTypes)) { 42 | result = body; 43 | } 44 | 45 | ctx.request.body = result; 46 | } 47 | await next(); 48 | }; 49 | } 50 | 51 | module.exports = bodyParser; 52 | -------------------------------------------------------------------------------- /demo/chapter-06-01/index.js: -------------------------------------------------------------------------------- 1 | const methods = [ 2 | 'GET', 3 | 'PUT', 4 | 'PATCH', 5 | 'POST', 6 | 'DELETE' 7 | ]; 8 | 9 | class Layer { 10 | constructor(path, methods, middleware, opts) { 11 | this.path = path; 12 | this.methods = methods; 13 | this.middleware = middleware; 14 | this.opts = opts; 15 | } 16 | } 17 | 18 | class Router { 19 | constructor(opts = {}) { 20 | this.stack = []; 21 | } 22 | 23 | register(path, methods, middleware, opts) { 24 | let route = new Layer(path, methods, middleware, opts); 25 | this.stack.push(route); 26 | return this; 27 | } 28 | 29 | routes() { 30 | let stock = this.stack; 31 | return async function(ctx, next) { 32 | let currentPath = ctx.path; 33 | let route; 34 | 35 | for (let i = 0; i < stock.length; i++) { 36 | let item = stock[i]; 37 | if (currentPath === item.path && item.methods.indexOf(ctx.method) >= 0) { 38 | route = item.middleware; 39 | break; 40 | } 41 | } 42 | 43 | if (typeof route === 'function') { 44 | route(ctx, next); 45 | return; 46 | } 47 | 48 | await next(); 49 | }; 50 | } 51 | } 52 | 53 | methods.forEach(method => { 54 | Router.prototype[method.toLowerCase()] = Router.prototype[method] = function(path, middleware) { 55 | this.register(path, [method], middleware); 56 | }; 57 | }); 58 | 59 | module.exports = Router; 60 | -------------------------------------------------------------------------------- /note/chapter04/01.md: -------------------------------------------------------------------------------- 1 | # koa-logger 实现 2 | 3 | ## 前言 4 | 5 | 狭义中间件，请求/拦截 最显著的特征是 6 | - 直接被`app.use()` 7 | - 拦截请求 8 | - 操作响应 9 | 10 | 最简单的场景是 Koa.js 官方支持传输静态文件中间件的实现`koa-logger`。 11 | 12 | 13 | > 本节主要以官方的 `koa-logger` 中间件为参考，实现了一个最简单的`koa-logger` 实现，方便原理讲解和后续二次自定义优化开发。 14 | 15 | 16 | ## 实现步骤 17 | 18 | - step 01 拦截请求，打印请求URL 19 | - step 02 操作响应，打印响应URL 20 | 21 | 22 | ## 实现源码 23 | 24 | [https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-04-01](https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-04-01) 25 | 26 | 27 | 28 | ```sh 29 | ## 安装依赖 30 | npm i 31 | 32 | ## 执行 demo 33 | npm run start 34 | 35 | ## 最后启动chrome浏览器访问 36 | ## http://127.0.0.1:3000/hello 37 | ## http://127.0.0.1:3000/world 38 | 39 | ## 控制台显示结果 40 | <-- GET /hello 41 | --> GET /hello 42 | <-- GET /world 43 | --> GET /world 44 | ``` 45 | 46 | 47 | ### 解读 48 | 49 | ```js 50 | const logger = async function(ctx, next) { 51 | let res = ctx.res; 52 | 53 | // 拦截操作请求 request 54 | console.log(`<-- ${ctx.method} ${ctx.url}`); 55 | 56 | await next(); 57 | 58 | // 拦截操作响应 request 59 | res.on('finish', () => { 60 | console.log(`--> ${ctx.method} ${ctx.url}`); 61 | }); 62 | }; 63 | 64 | module.exports = logger 65 | 66 | ``` 67 | 68 | ### 使用 69 | 70 | ```js 71 | const Koa = require('koa'); 72 | const logger = require('./index'); 73 | const app = new Koa(); 74 | 75 | app.use(logger); 76 | 77 | app.use(async(ctx, next) => { 78 | ctx.body = 'hello world'; 79 | }); 80 | 81 | app.listen(3000, () => { 82 | console.log('[demo] is starting at port 3000'); 83 | }); 84 | ``` 85 | 86 | ## 附录 87 | 88 | ### 参考 89 | 90 | [https://github.com/koajs/logger](https://github.com/koajs/logger) 91 | 92 | -------------------------------------------------------------------------------- /demo/chapter-middleware/example/view/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |line 1
'); 121 | }); 122 | 123 | app.use(ctx => { 124 | ctx.res.write('line 2
'); 125 | }); 126 | 127 | app.use(ctx => { 128 | ctx.res.write('line 3
'); 129 | }); 130 | 131 | app.listen(PORT, () => { 132 | console.log(`the web server is starting at port ${PORT}`); 133 | }); 134 | 135 | ``` 136 | -------------------------------------------------------------------------------- /demo/chapter-04-02/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const { 4 | basename, 5 | extname 6 | } = path; 7 | 8 | const defaultOpts = { 9 | root: '', 10 | maxage: 0, 11 | immutable: false, 12 | extensions: false, 13 | hidden: false, 14 | brotli: false, 15 | gzip: false, 16 | setHeaders: () => {} 17 | }; 18 | 19 | async function send(ctx, urlPath, opts = defaultOpts) { 20 | const { root, hidden, immutable, maxage, brotli, gzip, setHeaders } = opts; 21 | let filePath = urlPath; 22 | 23 | // step 01: normalize path 24 | // 配置静态资源绝对目录地址 25 | try { 26 | filePath = decodeURIComponent(filePath); 27 | // check legal path 28 | if (/[\.]{2,}/ig.test(filePath)) { 29 | ctx.throw(403, 'Forbidden'); 30 | } 31 | } catch (err) { 32 | ctx.throw(400, 'failed to decode'); 33 | } 34 | 35 | filePath = path.join(root, urlPath); 36 | const fileBasename = basename(filePath); 37 | 38 | // step 02: check hidden file support 39 | // 判断是否支持隐藏文件 40 | if (hidden !== true && fileBasename.startsWith('.')) { 41 | ctx.throw(404, '404 Not Found'); 42 | return; 43 | } 44 | 45 | // step 03: stat 46 | // 获取文件或者目录信息 47 | let stats; 48 | try { 49 | stats = fs.statSync(filePath); 50 | if (stats.isDirectory()) { 51 | ctx.throw(404, '404 Not Found'); 52 | } 53 | } catch (err) { 54 | const notfound = ['ENOENT', 'ENAMETOOLONG', 'ENOTDIR']; 55 | if (notfound.includes(err.code)) { 56 | ctx.throw(404, '404 Not Found'); 57 | return; 58 | } 59 | err.status = 500; 60 | throw err; 61 | } 62 | 63 | let encodingExt = ''; 64 | // step 04 check zip 65 | // 判断是否需要压缩 66 | if (ctx.acceptsEncodings('br', 'identity') === 'br' && brotli && (fs.existsSync(filePath + '.br'))) { 67 | filePath = filePath + '.br'; 68 | ctx.set('Content-Encoding', 'br'); 69 | ctx.res.removeHeader('Content-Length'); 70 | encodingExt = '.br'; 71 | } else if (ctx.acceptsEncodings('gzip', 'identity') === 'gzip' && gzip && (fs.existsSync(filePath + '.gz'))) { 72 | filePath = filePath + '.gz'; 73 | ctx.set('Content-Encoding', 'gzip'); 74 | ctx.res.removeHeader('Content-Length'); 75 | encodingExt = '.gz'; 76 | } 77 | 78 | // step 05 setHeaders 79 | // 设置HTTP头信息 80 | if (typeof setHeaders === 'function') { 81 | setHeaders(ctx.res, filePath, stats); 82 | } 83 | 84 | ctx.set('Content-Length', stats.size); 85 | if (!ctx.response.get('Last-Modified')) { 86 | ctx.set('Last-Modified', stats.mtime.toUTCString()); 87 | } 88 | if (!ctx.response.get('Cache-Control')) { 89 | const directives = ['max-age=' + (maxage / 1000 | 0)]; 90 | if (immutable) { 91 | directives.push('immutable'); 92 | } 93 | ctx.set('Cache-Control', directives.join(',')); 94 | } 95 | 96 | const ctxType = encodingExt !== '' ? extname(basename(filePath, encodingExt)) : extname(filePath); 97 | ctx.type = ctxType; 98 | 99 | // step 06 stream 100 | // 静态文件读取 101 | ctx.body = fs.createReadStream(filePath); 102 | } 103 | 104 | module.exports = send; 105 | -------------------------------------------------------------------------------- /demo/chapter-04-03/send.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const { 4 | basename, 5 | extname 6 | } = path; 7 | 8 | const defaultOpts = { 9 | root: '', 10 | maxage: 0, 11 | immutable: false, 12 | extensions: false, 13 | hidden: false, 14 | brotli: false, 15 | gzip: false, 16 | setHeaders: () => {} 17 | }; 18 | 19 | async function send(ctx, urlPath, opts = defaultOpts) { 20 | const { root, hidden, immutable, maxage, brotli, gzip, setHeaders } = opts; 21 | let filePath = urlPath; 22 | 23 | // step 01: normalize path 24 | // 配置静态资源绝对目录地址 25 | try { 26 | filePath = decodeURIComponent(filePath); 27 | // check legal path 28 | if (/[\.]{2,}/ig.test(filePath)) { 29 | ctx.throw(403, 'Forbidden'); 30 | } 31 | } catch (err) { 32 | ctx.throw(400, 'failed to decode'); 33 | } 34 | 35 | filePath = path.join(root, urlPath); 36 | const fileBasename = basename(filePath); 37 | 38 | // step 02: check hidden file support 39 | // 判断是否支持隐藏文件 40 | if (hidden !== true && fileBasename.startsWith('.')) { 41 | ctx.throw(404, '404 Not Found'); 42 | return; 43 | } 44 | 45 | // step 03: stat 46 | // 获取文件或者目录信息 47 | let stats; 48 | try { 49 | stats = fs.statSync(filePath); 50 | if (stats.isDirectory()) { 51 | ctx.throw(404, '404 Not Found'); 52 | } 53 | } catch (err) { 54 | const notfound = ['ENOENT', 'ENAMETOOLONG', 'ENOTDIR']; 55 | if (notfound.includes(err.code)) { 56 | ctx.throw(404, '404 Not Found'); 57 | return; 58 | } 59 | err.status = 500; 60 | throw err; 61 | } 62 | 63 | let encodingExt = ''; 64 | // step 04 check zip 65 | // 判断是否需要压缩 66 | if (ctx.acceptsEncodings('br', 'identity') === 'br' && brotli && (fs.existsSync(filePath + '.br'))) { 67 | filePath = filePath + '.br'; 68 | ctx.set('Content-Encoding', 'br'); 69 | ctx.res.removeHeader('Content-Length'); 70 | encodingExt = '.br'; 71 | } else if (ctx.acceptsEncodings('gzip', 'identity') === 'gzip' && gzip && (fs.existsSync(filePath + '.gz'))) { 72 | filePath = filePath + '.gz'; 73 | ctx.set('Content-Encoding', 'gzip'); 74 | ctx.res.removeHeader('Content-Length'); 75 | encodingExt = '.gz'; 76 | } 77 | 78 | // step 05 setHeaders 79 | // 设置HTTP头信息 80 | if (typeof setHeaders === 'function') { 81 | setHeaders(ctx.res, filePath, stats); 82 | } 83 | 84 | ctx.set('Content-Length', stats.size); 85 | if (!ctx.response.get('Last-Modified')) { 86 | ctx.set('Last-Modified', stats.mtime.toUTCString()); 87 | } 88 | if (!ctx.response.get('Cache-Control')) { 89 | const directives = ['max-age=' + (maxage / 1000 | 0)]; 90 | if (immutable) { 91 | directives.push('immutable'); 92 | } 93 | ctx.set('Cache-Control', directives.join(',')); 94 | } 95 | 96 | const ctxType = encodingExt !== '' ? extname(basename(filePath, encodingExt)) : extname(filePath); 97 | ctx.type = ctxType; 98 | 99 | // step 06 stream 100 | // 静态文件读取 101 | ctx.body = fs.createReadStream(filePath); 102 | } 103 | 104 | module.exports = send; 105 | -------------------------------------------------------------------------------- /note/chapter06/01.md: -------------------------------------------------------------------------------- 1 | # koa-router 实现 2 | 3 | ## 前言 4 | 5 | 广义中间件，间接中间件方式 6 | 7 | - 不直接提供中间件 8 | - 通过间接方式提供了中间件，最常见的是`间接中间件`和`子中间件` 9 | - 间接被 `app.use()` 加载 10 | - 其他方式接入Koa切面 11 | 12 | 这里 广义中间件，间接中间件方式实现 最代表性是第三方实现的 `koa-router` 中间件，这里基于第三方中间件 `koa-router` 用最简单的方式实现 `koa-router` 最简单功能。 13 | 14 | 15 | ## 实现步骤 16 | 17 | - 初始化路由实例 18 | - 注册路由请求信息缓存到实例中 19 | - 请求类型 20 | - 请求path 21 | - 对应的请求后操作 22 | - 注册的路由操作就是子中间件 23 | - 路由实例输出父中间件 24 | - 返回一个父中间件 25 | - 中间件里对每次请求进行遍历匹配缓存中注册的路由操作 26 | - 匹配上请求类型，路径就执行对应路由子中间件 27 | - app.use()路由实例返回的父中间件 28 | 29 | ## 实现源码 30 | 31 | [https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-06-01](https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-06-01) 32 | 33 | 34 | 35 | ```sh 36 | ## 安装依赖 37 | npm i 38 | 39 | ## 执行 demo 40 | npm run start 41 | 42 | ## 最后启动chrome浏览器访问 43 | ## http://127.0.0.1:3000/index 44 | ## http://127.0.0.1:3000/post 45 | ## http://127.0.0.1:3000/list 46 | ## http://127.0.0.1:3000/item 47 | ``` 48 | 49 | ### 解读 50 | 51 | ```js 52 | const methods = [ 53 | 'GET', 54 | 'PUT', 55 | 'PATCH', 56 | 'POST', 57 | 'DELETE' 58 | ]; 59 | 60 | class Layer { 61 | constructor(path, methods, middleware, opts) { 62 | this.path = path; 63 | this.methods = methods; 64 | this.middleware = middleware; 65 | this.opts = opts; 66 | } 67 | } 68 | 69 | class Router { 70 | constructor(opts = {}) { 71 | this.stack = []; 72 | } 73 | 74 | register(path, methods, middleware, opts) { 75 | let route = new Layer(path, methods, middleware, opts); 76 | this.stack.push(route); 77 | return this; 78 | } 79 | 80 | routes() { 81 | 82 | let stock = this.stack; 83 | return async function(ctx, next) { 84 | let currentPath = ctx.path; 85 | let route; 86 | 87 | for (let i = 0; i < stock.length; i++) { 88 | let item = stock[i]; 89 | if (currentPath === item.path && item.methods.indexOf(ctx.method) >= 0) { 90 | route = item.middleware; 91 | break; 92 | } 93 | } 94 | 95 | if (typeof route === 'function') { 96 | route(ctx, next); 97 | return; 98 | } 99 | 100 | await next(); 101 | }; 102 | } 103 | } 104 | 105 | methods.forEach(method => { 106 | Router.prototype[method.toLowerCase()] = Router.prototype[method] = function(path, middleware) { 107 | this.register(path, [method], middleware); 108 | }; 109 | }); 110 | 111 | module.exports = Router; 112 | 113 | ``` 114 | 115 | ### 使用 116 | 117 | ```js 118 | 119 | const Koa = require('koa'); 120 | const Router = require('./index'); 121 | const app = new Koa(); 122 | 123 | // 初始化路由实例 124 | const router = new Router(); 125 | 126 | // 注册路由请求信息缓存到实例中 127 | router.get('/index', async ctx => { ctx.body = 'index page'; }); 128 | router.get('/post', async ctx => { ctx.body = 'post page'; }); 129 | router.get('/list', async ctx => { ctx.body = 'list page'; }); 130 | router.get('/item', async ctx => { ctx.body = 'item page'; }); 131 | 132 | // 路由实例输出父中间件 router.routes() 133 | app.use(router.routes()); 134 | 135 | app.use(async ctx => { 136 | ctx.body = '404'; 137 | }); 138 | 139 | app.listen(3000); 140 | console.log('listening on port 3000'); 141 | 142 | ``` 143 | 144 | ## 附录 145 | 146 | ### 参考 147 | 148 | - [https://github.com/alexmingoia/koa-router](https://github.com/alexmingoia/koa-router) -------------------------------------------------------------------------------- /note/chapter01/07.md: -------------------------------------------------------------------------------- 1 | # 最简Koa.js实现 2 | 3 | ## 前言 4 | 5 | 从上一章可以看到最简单的中间件式HTTP服务的实现，底层是基于回调嵌套去处理中间件队列。 6 | 7 | ```js 8 | /** 9 | * 中间件总回调方法 10 | */ 11 | callback() { 12 | let that = this; 13 | 14 | if (this.listeners('error').length === 0) { 15 | this.on('error', this.onerror); 16 | } 17 | 18 | const handleRequest = (req, res) => { 19 | let context = that.createContext(req, res); 20 | this.middleware.forEach((cb, idx) => { 21 | try { 22 | cb(context); 23 | } catch (err) { 24 | that.onerror(err); 25 | } 26 | 27 | if (idx + 1 >= this.middleware.length) { 28 | if (res && typeof res.end === 'function') { 29 | res.end(); 30 | } 31 | } 32 | }); 33 | }; 34 | return handleRequest; 35 | } 36 | ``` 37 | 38 | 但是中间件越多，回调嵌套越深，代码的可读性和可扩展性就很差，所以这时候把回调嵌套转化成 `Promise` + `async/await` ，这个时候就转变成最简单的`Koa.js`实现。 39 | 40 | ## 必要条件 41 | - 通过上下文赋值可代替 `res.end()` 42 | - 洋葱模型的中间件机制 43 | 44 | ## 源码实现 45 | 46 | - demo源码 47 | 48 | [https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-01-07](https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-01-07) 49 | 50 | - 最简Koa.js 实现 51 | 52 | ```js 53 | const http = require('http'); 54 | const Emitter = require('events'); 55 | // 注意：这里的compose是前几章的中间件引擎源码 56 | const compose = require('./../compose'); 57 | 58 | /** 59 | * 通用上下文 60 | */ 61 | const context = { 62 | _body: null, 63 | 64 | get body() { 65 | return this._body; 66 | }, 67 | 68 | set body(val) { 69 | this._body = val; 70 | this.res.end(this._body); 71 | } 72 | }; 73 | 74 | class SimpleKoa extends Emitter { 75 | constructor() { 76 | super(); 77 | this.middleware = []; 78 | this.context = Object.create(context); 79 | } 80 | 81 | /** 82 | * 服务事件监听 83 | * @param {*} args 84 | */ 85 | listen(...args) { 86 | const server = http.createServer(this.callback()); 87 | return server.listen(...args); 88 | } 89 | 90 | /** 91 | * 注册使用中间件 92 | * @param {Function} fn 93 | */ 94 | use(fn) { 95 | if (typeof fn === 'function') { 96 | this.middleware.push(fn); 97 | } 98 | } 99 | 100 | /** 101 | * 中间件总回调方法 102 | */ 103 | callback() { 104 | 105 | if (this.listeners('error').length === 0) { 106 | this.on('error', this.onerror); 107 | } 108 | 109 | const handleRequest = (req, res) => { 110 | let context = this.createContext(req, res); 111 | let middleware = this.middleware; 112 | // 执行中间件 113 | compose(middleware)(context).catch(err => this.onerror(err)) 114 | }; 115 | return handleRequest; 116 | } 117 | 118 | /** 119 | * 异常处理监听 120 | * @param {EndOfStreamError} err 121 | */ 122 | onerror(err) { 123 | console.log(err); 124 | } 125 | 126 | /** 127 | * 创建通用上下文 128 | * @param {Object} req 129 | * @param {Object} res 130 | */ 131 | createContext(req, res) { 132 | let context = Object.create(this.context); 133 | context.req = req; 134 | context.res = res; 135 | return context; 136 | } 137 | } 138 | 139 | module.exports = SimpleKoa; 140 | 141 | ``` 142 | 143 | - 执行例子 144 | 145 | ```js 146 | const SimpleKoa = require('./index'); 147 | 148 | const app = new SimpleKoa(); 149 | const PORT = 3001; 150 | 151 | app.use(async ctx => { 152 | ctx.body = 'this is a body
'; 153 | }); 154 | 155 | app.listen(PORT, () => { 156 | console.log(`the web server is starting at port ${PORT}`); 157 | }); 158 | 159 | ``` 160 | -------------------------------------------------------------------------------- /note/chapter01/03.md: -------------------------------------------------------------------------------- 1 | # async/await 的主要使用 2 | 3 | ## 前言 4 | 5 | 对于回调来讲，`Promise` 的到来看似只解决了回调场景中的状态处理问题，但是`JavaScript`中令人头疼不是`回调`，而是 `回调嵌套`。同时，`Promise`的出现，也不能彻底解决回调嵌套的带来的代码维护和可读性的问题。 6 | 7 | - 原生回调嵌套 8 | 9 | ```js 10 | function increase(num, callback) { 11 | setTimeout(() => { 12 | if( !(num >= 0) ) { 13 | callback(new Error('The parameters must be greater than zero'), null) 14 | } else { 15 | let result = num + 1; 16 | callback(null, result); 17 | } 18 | }, 100) 19 | } 20 | 21 | increase(1, (err, result1) => { 22 | if(!err) { 23 | console.log(`result1 = ${result1}`) 24 | 25 | increase(result1, (err, result2) => { 26 | if(!err) { 27 | console.log(`result2 = ${result2}`) 28 | 29 | increase(result2, (err, result3) => { 30 | if(!err) { 31 | console.log(`result3 = ${result3}`) 32 | } else { 33 | console.log(err) 34 | } 35 | }) 36 | } else { 37 | console.log(err) 38 | } 39 | }) 40 | } else { 41 | console.log(err) 42 | } 43 | }) 44 | // 运行结果 45 | // "result1 = 2" 46 | // "result1 = 3" 47 | // "result1 = 4" 48 | ``` 49 | 50 | - Promise 处理回调嵌套 51 | 52 | ```js 53 | function increase(num) { 54 | return new Promise((resolve, reject) => { 55 | setTimeout(() => { 56 | if( !(num >= 0) ) { 57 | reject(new Error('The parameters must be greater than zero')) 58 | } else { 59 | let result = num + 1; 60 | resolve(result); 61 | } 62 | }, 100) 63 | }) 64 | } 65 | 66 | 67 | increase(1).then((result1) => { 68 | console.log(`result1 = ${result1}`) 69 | 70 | increase(result1).then((result2) => { 71 | console.log(`result2 = ${result2}`) 72 | 73 | increase(result2).then((result3) => { 74 | console.log(`result3 = ${result3}`) 75 | }).catch(err => console.log(err)); 76 | 77 | }).catch(err => console.log(err)); 78 | 79 | }).catch(err => console.log(err)); 80 | // 运行结果 81 | // "result1 = 2" 82 | // "result1 = 3" 83 | // "result1 = 4" 84 | ``` 85 | 86 | 所以这时候，需要一个更优雅处理`Promise 嵌套任务` 的语法，因此，`async/await` 就横空出世，也就是直接或间接解决了 `回调嵌套` 的问题。 87 | 88 | 一句话，`async/await` 的出现是为了解决`回调嵌套`的操作繁琐和可读性差的问题。 89 | 90 | 91 | ## aysnc/await的使用 92 | 93 | - async 是 `声明` 在回调环境函数 94 | - await 是 `运行` 在等待回调结果过程中 95 | - Promise 是封装了回调操作的 `原子任务` 96 | 97 | 98 | 举一个简单的例子 99 | 100 | ```js 101 | // 封装原子任务 102 | function increase(num) { 103 | return new Promise((resolve, reject) => { 104 | setTimeout(() => { 105 | if( !(num >= 0) ) { 106 | reject(new Error('The parameters must be greater than zero')) 107 | } else { 108 | resolve(num + 1) 109 | } 110 | 111 | }, 100); 112 | }).catch(err => console.log(err)) 113 | 114 | } 115 | 116 | // 声明任务环境 117 | async function envIncrease() { 118 | let num = 1; 119 | // 等待回调任务结果1返回 120 | let result1 = await increase(num); 121 | console.log(`result1 = ${result1}`); 122 | 123 | // 等待回调任务结果2返回 124 | let result2 = await increase(result1); 125 | console.log(`result2 = ${result2}`); 126 | 127 | // 等待回调任务结果3返回 128 | let result3 = await increase(result2); 129 | console.log(`result3 = ${result3}`); 130 | 131 | return result3 132 | } 133 | 134 | // 声明任务环境 135 | async function env() { 136 | // 等待 环境 Increase 的结果返回 137 | let result = await envIncrease() 138 | console.log(`result = ${result}`); 139 | } 140 | 141 | // 运行环境 142 | env() 143 | 144 | 145 | 146 | // 运行结果 147 | // "result1 = 2" 148 | // "result1 = 3" 149 | // "result1 = 4" 150 | ``` 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Koa.js 设计模式-学习笔记 2 | 3 | ## 关于本书 4 | 5 |  6 | 7 | - [关于作者(我)](https://chenshenhai.com/) 8 | - 个人博客阅读入口 [https://chenshenhai.com/koajs-design-note](https://chenshenhai.com/koajs-design-note); 9 | - Github Pages 阅读入口 [https://chenshenhai.github.io/koajs-design-note/](https://chenshenhai.github.io/koajs-design-note/) 10 | - 如有错误或疑问欢迎，提交[issues](https://github.com/chenshenhai/koajs-design-note/issues)或PR 11 | 12 | 13 | 更多前端`技术学习`和`开源学习教程`可关注公众号 `DeepSeaCode` (`大海码` ) 14 | 15 |  16 | 17 |${JSON.stringify(serverInfo)}
138 | 139 | 140 | `; 141 | } 142 | 143 | app.use(middleware); 144 | app.use(page); 145 | 146 | app.listen(3001, function(){ 147 | console.log('the demo is start at port 3001'); 148 | }) 149 | ``` 150 | 151 | ### 初始化实例挂载代理context 152 | 153 | ```js 154 | const Koa = require('koa'); 155 | let app = new Koa(); 156 | 157 | const middleware = function(app) { 158 | // 中间件在初始化实例 把getServerInfo方法 挂载代理到上下文 159 | app.context.getServerInfo = function() { 160 | function parseMem( mem = 0 ) { 161 | let memVal = mem / 1024 / 1024; 162 | memVal = memVal.toFixed(2) + 'MB'; 163 | return memVal; 164 | } 165 | 166 | function getMemInfo() { 167 | let memUsage = process.memoryUsage(); 168 | let rss = parseMem(memUsage.rss); 169 | let heapTotal = parseMem(memUsage.heapTotal); 170 | let heapUsed = parseMem(memUsage.heapUsed); 171 | return { 172 | pid: process.pid, 173 | rss, 174 | heapTotal, 175 | heapUsed 176 | } 177 | } 178 | return getMemInfo() 179 | }; 180 | } 181 | 182 | middleware(app); 183 | 184 | const page = async function(ctx, next) { 185 | const serverInfo = ctx.getServerInfo(); 186 | ctx.body = ` 187 | 188 | 189 | 190 |${JSON.stringify(serverInfo)}
191 | 192 | 193 | `; 194 | } 195 | 196 | app.use(page); 197 | 198 | app.listen(3001, function(){ 199 | console.log('the demo is start at port 3001'); 200 | }) 201 | 202 | ``` -------------------------------------------------------------------------------- /note/chapter01/02.md: -------------------------------------------------------------------------------- 1 | # Promise 的主要使用 2 | 3 | ## 前言 4 | 5 | `回调` 一直是JavaScript编程中比较令人纠结的写法，主要场景是用于处理 “并列”或者“并行”的操作，然后在回调函数中处理操作结果。这样子原生的回调写法就会带来一下的不便。 6 | 7 | - 回调结果状态不便管理 8 | - 回调方式自由松散，没有规范约束 9 | 10 | 例如下面的回调的写法 11 | 12 | ```js 13 | function func(num, callback) { 14 | setTimeout(() => { 15 | try { 16 | let result = 1/num; 17 | callback(result, null); 18 | } catch(err) { 19 | callback(null, err); 20 | } 21 | }, 10) 22 | } 23 | 24 | 25 | func(1, (result, err) => { 26 | if( err ) { 27 | console.log(err) 28 | } else { 29 | console.log(result) 30 | } 31 | }) 32 | ``` 33 | 34 | 上述代码中，发现如果要处理回调结果 `result`和错误`err` ，后续的所有就必须在回调函数里面处理，而且回调函数里面还需要自己处理异常判断。 35 | 那如果是使用了`Promise`来处理回调操作，就可以用以下写法处理。 36 | 37 | ```js 38 | 39 | 40 | function func(num, callback) { 41 | return new Promise((resolve) => { 42 | setTimeout(() => { 43 | let result = 1/num; 44 | resolve(result); 45 | }, 1000) 46 | }) 47 | } 48 | 49 | func(1).then((result) => { 50 | console.log(result) 51 | }).catch((err) => { 52 | console.log(err) 53 | }) 54 | ``` 55 | 56 | 57 | 58 | ## Promise能力 59 | 60 | Promise 带来的能力是`任务管理`，常用的方式有 61 | 62 | `new Promise(...).then(onResolved, onRejected)` 63 | 64 | - 任务状态管理 65 | - `resolve` 成功状态，对应 `Promise.resolve` 66 | - `reject` 失败状态，对应 `Promise.reject` 67 | - `error` 异常状态， 对应 `Promise.reject` 或 `new Promise().catch(onRejected)` 68 | - `Thenabled`机制提供任务方法链 69 | - `new Promise().then().then().catch()` 70 | 71 | ### resolve 72 | 73 | 处理任务的成功状态 74 | 75 | - 普通方式 76 | 77 | ```js 78 | let p = new Promise((resolve) => { 79 | setTimeout(() => { 80 | let result = 1; 81 | resolve(result); 82 | }, 1000) 83 | }) 84 | 85 | p.then((result)=>{ console.log(result) }) 86 | ``` 87 | 88 | - 快捷方式 89 | 90 | ```js 91 | let p = Promise.resolve(1) 92 | 93 | p.then((result)=>{ console.log(result) }) 94 | ``` 95 | 96 | ### reject 97 | 98 | 处理任务的失败状态 99 | 100 | - 普通方式 101 | 102 | ```js 103 | let p = new Promise((resolve, reject) => { 104 | setTimeout(() => { 105 | let result = 2; 106 | reject(result); 107 | }, 100) 108 | }) 109 | // 有两种方式获取失败状态 110 | // 第一种，通过then 第二个函数参数处理失败状态 111 | p.then((result)=>{ 112 | console.log('success:',result); 113 | }, (result)=>{ 114 | console.log('fail:',result); 115 | }) 116 | // "fail: 2" 117 | 118 | // 第二种，或者通过，catch 获取失败状态 119 | p.then((result)=>{ 120 | console.log('success:',result); 121 | }).catch((result)=>{ 122 | console.log('error:',result); 123 | }) 124 | // "error: 2" 125 | 126 | 127 | // 注意：如果两种方式同时使用的话 128 | // 只会被第一种方式reject操作失败的结果 129 | p.then((result)=>{ 130 | console.log('success:',result); 131 | }, (result)=>{ 132 | console.log('fail:',result); 133 | }).catch((result)=>{ 134 | console.log('error:',result); 135 | }) 136 | // "fail: 2" 137 | 138 | ``` 139 | 140 | - 快捷方式 141 | 142 | ```js 143 | let p = Promise.reject(2) 144 | 145 | p.then(null, result => console.log('fail:', result)) 146 | 147 | // 或 148 | p.then().catch( result => console.log('error:', result)) 149 | ``` 150 | 151 | 152 | ### catch 153 | 154 | 从上述 `reject` 的使用过程中，会发现, `catch`操作在没有设置 onRejected 处理的时候，会被`catch` 捕获失败处理。同时`catch` 也会捕获 onResolved 和 onRejected中出现的错误。 155 | 156 | - 正常情况下直接捕获`reject`结果 157 | 158 | ```js 159 | let p = new Promise((resolve, reject) => { 160 | reject(3) 161 | }); 162 | 163 | p.then((result) => { 164 | console.log('success:', result) 165 | }).catch((result) => { 166 | console.log('error:', result) 167 | }) 168 | 169 | // "error: 3" 170 | ``` 171 | 172 | 173 | - 捕获 onResolved 中错误异常 174 | 175 | ```js 176 | let p = new Promise((resolve) => { 177 | resolve(3) 178 | }); 179 | 180 | p.then((result) => { 181 | throw new Error('custom resolve error!') 182 | console.log('success:', result) 183 | }).catch((err) => { 184 | console.log('Custom error:', err) 185 | }) 186 | 187 | // "Custom error: Error: custom resolve error!" 188 | 189 | ``` 190 | 191 | - 捕获 onRejected 中错误异常 192 | 193 | ```js 194 | let p = new Promise((resolve) => { 195 | reject(3) 196 | }); 197 | 198 | p.then(null, (result) => { 199 | throw new Error('custom reject error!') 200 | console.log('fail:', result) 201 | }).catch((err) => { 202 | console.log('Custom error:', err) 203 | }) 204 | // "Custom error: Error: custom reject error!" 205 | ``` 206 | 207 | 208 | ## 后记 209 | 210 | 由于本书主要介绍 `Koa.js`的原理，主要涉及到`Promise`的`resolve`、`reject`和`catch` 更多 关于 `Promise` 的原理和使用，请查看一下文档： 211 | 212 | [https://docs.microsoft.com/zh-cn/scripting/javascript/reference/promise-object-javascript](https://docs.microsoft.com/zh-cn/scripting/javascript/reference/promise-object-javascript) 213 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /note/chapter01/05.md: -------------------------------------------------------------------------------- 1 | # 中间件引擎 2 | 3 | ## 前言 4 | 在使用Koa.js过程中，会发现中间件的使用都是这样子的，如以下代码所示。 5 | 6 | ```js 7 | const Koa = require('koa'); 8 | let app = new Koa(); 9 | 10 | const middleware1 = async (ctx, next) => { 11 | console.log(1); 12 | await next(); 13 | console.log(6); 14 | } 15 | 16 | const middleware2 = async (ctx, next) => { 17 | console.log(2); 18 | await next(); 19 | console.log(5); 20 | } 21 | 22 | const middleware3 = async (ctx, next) => { 23 | console.log(3); 24 | await next(); 25 | console.log(4); 26 | } 27 | 28 | app.use(middleware1); 29 | app.use(middleware2); 30 | app.use(middleware3); 31 | app.use(async(ctx, next) => { 32 | ctx.body = 'hello world' 33 | }) 34 | 35 | app.listen(3001) 36 | 37 | // 启动访问浏览器 38 | // 控制台会出现以下结果 39 | // 1 40 | // 2 41 | // 3 42 | // 4 43 | // 5 44 | // 6 45 | ``` 46 | 为什么会出现以上的结果， 47 | 这个主要是Koa.js的一个中间件引擎 `koa-compose`模块来实现的，也就是Koa.js实现`洋葱模型`的核心引擎。 48 | 49 | 50 | ## 中间件原理 51 | 52 | 洋葱模型可以看出，中间件的在 `await next()` 前后的操作，很像数据结构的一种场景——“栈”，先进后出。同时，又有统一上下文管理操作数据。综上所述，可以总结出一下特性。 53 | 54 | - 有统一 `context` 55 | - 操作先进后出 56 | - 有控制先进后出的机制 `next` 57 | - 有提前结束机制 58 | 59 | 这样子我们可以单纯用 `Promise` 做个简单的实现如下 60 | 61 | ```js 62 | let context = { 63 | data: [] 64 | }; 65 | 66 | async function middleware1(ctx, next) { 67 | console.log('action 001'); 68 | ctx.data.push(1); 69 | await next(); 70 | console.log('action 006'); 71 | ctx.data.push(6); 72 | } 73 | 74 | async function middleware2(ctx, next) { 75 | console.log('action 002'); 76 | ctx.data.push(2); 77 | await next(); 78 | console.log('action 005'); 79 | ctx.data.push(5); 80 | } 81 | 82 | async function middleware3(ctx, next) { 83 | console.log('action 003'); 84 | ctx.data.push(3); 85 | await next(); 86 | console.log('action 004'); 87 | ctx.data.push(4); 88 | } 89 | 90 | Promise.resolve(middleware1(context, async() => { 91 | return Promise.resolve(middleware2(context, async() => { 92 | return Promise.resolve(middleware3(context, async() => { 93 | return Promise.resolve(); 94 | })); 95 | })); 96 | })) 97 | .then(() => { 98 | console.log('end'); 99 | console.log('context = ', context); 100 | }); 101 | 102 | // 结果显示 103 | // "action 001" 104 | // "action 002" 105 | // "action 003" 106 | // "action 004" 107 | // "action 005" 108 | // "action 006" 109 | // "end" 110 | // "context = { data: [1, 2, 3, 4, 5, 6]}" 111 | 112 | ``` 113 | 114 | ## 引擎实现 115 | 116 | 通过上一节中的中间件原理，可以看出，单纯用`Promise` 嵌套可以直接实现中间件流程。虽然可以实现，但是`Promise`嵌套会产生代码的可读性和可维护性的问题，也带来了中间件扩展问题。 117 | 118 | 所以需要把`Promise` 嵌套实现的中间件方式进行高度抽象，达到可以自定义中间件的层数。这时候需要借助前面几章提到的处理 `Promise`嵌套的神器`async/await`。 119 | 120 | 我们先理清楚需要的步骤 121 | - 中间件队列 122 | - 处理中间件队列，并将上下文`context`传进去 123 | - 中间件的流程控制器`next` 124 | - 异常处理 125 | 126 | 根据上一节分析中间的原理，我们可以抽象出 127 | - 每一个中间件需要封装一个 `Promise` 128 | - 洋葱模型的先进后出操作，对应`Promise.resolve`的前后操作 129 | 130 | > 源码地址 131 | [https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-01-05](https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-01-05) 132 | 133 | 134 | ```js 135 | function compose(middleware) { 136 | 137 | if (!Array.isArray(middleware)) { 138 | throw new TypeError('Middleware stack must be an array!'); 139 | } 140 | 141 | return function(ctx, next) { 142 | let index = -1; 143 | 144 | return dispatch(0); 145 | 146 | function dispatch(i) { 147 | if (i < index) { 148 | return Promise.reject(new Error('next() called multiple times')); 149 | } 150 | index = i; 151 | 152 | let fn = middleware[i]; 153 | 154 | if (i === middleware.length) { 155 | fn = next; 156 | } 157 | 158 | if (!fn) { 159 | return Promise.resolve(); 160 | } 161 | 162 | try { 163 | return Promise.resolve(fn(ctx, () => { 164 | return dispatch(i + 1); 165 | })); 166 | } catch (err) { 167 | return Promise.reject(err); 168 | } 169 | } 170 | }; 171 | } 172 | ``` 173 | 174 | 试用中间件引擎 175 | 176 | ```js 177 | let middleware = []; 178 | let context = { 179 | data: [] 180 | }; 181 | 182 | middleware.push(async(ctx, next) => { 183 | console.log('action 001'); 184 | ctx.data.push(2); 185 | await next(); 186 | console.log('action 006'); 187 | ctx.data.push(5); 188 | }); 189 | 190 | middleware.push(async(ctx, next) => { 191 | console.log('action 002'); 192 | ctx.data.push(2); 193 | await next(); 194 | console.log('action 005'); 195 | ctx.data.push(5); 196 | }); 197 | 198 | middleware.push(async(ctx, next) => { 199 | console.log('action 003'); 200 | ctx.data.push(2); 201 | await next(); 202 | console.log('action 004'); 203 | ctx.data.push(5); 204 | }); 205 | 206 | const fn = compose(middleware); 207 | 208 | fn(context) 209 | .then(() => { 210 | console.log('end'); 211 | console.log('context = ', context); 212 | }); 213 | 214 | // 结果显示 215 | // "action 001" 216 | // "action 002" 217 | // "action 003" 218 | // "action 004" 219 | // "action 005" 220 | // "action 006" 221 | // "end" 222 | // "context = { data: [1, 2, 3, 4, 5, 6]}" 223 | 224 | ``` 225 | -------------------------------------------------------------------------------- /note/chapter05/03.md: -------------------------------------------------------------------------------- 1 | 2 | # koa-bodyparser 实现 3 | 4 | > 请求代理上下文context实现 5 | 6 | ## 前言 7 | 8 | 狭义中间件的上下文代理，除了在实例化 `let app = new Koa()` 的时候将属性或者方法挂载到`app.context` 中，供后续中间件使用。另外一种方式是在请求过程中在顶端中间件(一般在第一个中间件)使用，把数据或者方法挂载代理到`ctx` 供下游中间件获取和使用。 9 | 10 | 这里 请求代理上下文实现 最代表性是官方提供的`koa-bodyparser` 中间件，这里基于官方原版用最简单的方式实现`koa-bodyparser`最简单功能。 11 | 12 | 常见请求代理上下文context实现过程 13 | 14 | - 请求代理ctx 15 | - 直接app.use() 16 | - 在请求过程中过载方法或者数据到上下文`ctx` 17 | - 一般在大部分中间件前加载，供下游中间件获取挂载的数据或方法 18 | 19 | 20 | ## 实现步骤 21 | 22 | - step 01 `app.use()`在中间件最顶端 23 | - step 02 拦截post请求 24 | - step 03 等待解析表单信息 25 | - step 04 把表单信息代理到ctx.request.body上 26 | - step 05 下游中间件都可以在ctx.request.body中获取表单数据 27 | 28 | 29 | ## 实现源码 30 | 31 | demo源码 32 | 33 | [https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-05-03](https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-05-03) 34 | 35 | ```sh 36 | ## 安装依赖 37 | npm i 38 | 39 | ## 执行 demo 40 | npm run start 41 | 42 | ## 最后启动chrome浏览器访问 43 | ## http://127.0.0.1:3000 44 | ``` 45 | 46 | 47 | ### 依赖 48 | 49 | 请求体数据流解析方法 50 | 51 | ```js 52 | module.exports = readStream; 53 | 54 | function readStream(req) { 55 | return new Promise((resolve, reject) => { 56 | try { 57 | streamEventListen(req, (data, err) => { 58 | if (data && !isError(err)) { 59 | resolve(data); 60 | } else { 61 | reject(err); 62 | } 63 | }); 64 | } catch (err) { 65 | reject(err); 66 | } 67 | }); 68 | } 69 | 70 | function isError(err) { 71 | return Object.prototype.toString.call(err).toLowerCase() === '[object error]'; 72 | } 73 | 74 | function streamEventListen(req, callback) { 75 | let stream = req.req || req; 76 | let chunk = []; 77 | let complete = false; 78 | 79 | // attach listeners 80 | stream.on('aborted', onAborted); 81 | stream.on('close', cleanup); 82 | stream.on('data', onData); 83 | stream.on('end', onEnd); 84 | stream.on('error', onEnd); 85 | 86 | function onAborted() { 87 | if (complete) { 88 | return; 89 | } 90 | callback(null, new Error('request body parse aborted')); 91 | } 92 | 93 | function cleanup() { 94 | stream.removeListener('aborted', onAborted); 95 | stream.removeListener('data', onData); 96 | stream.removeListener('end', onEnd); 97 | stream.removeListener('error', onEnd); 98 | stream.removeListener('close', cleanup); 99 | } 100 | 101 | function onData(data) { 102 | if (complete) { 103 | return; 104 | } 105 | if (data) { 106 | chunk.push(data.toString()); 107 | } 108 | } 109 | 110 | function onEnd(err) { 111 | if (complete) { 112 | return; 113 | } 114 | 115 | if (isError(err)) { 116 | callback(null, err); 117 | return; 118 | } 119 | 120 | complete = true; 121 | let result = chunk.join(''); 122 | chunk = []; 123 | callback(result, null); 124 | } 125 | } 126 | 127 | ``` 128 | 129 | ### 解读 130 | 131 | ```js 132 | const readStream = require('./lib/read_stream'); 133 | let strictJSONReg = /^[\x20\x09\x0a\x0d]*(\[|\{)/; 134 | 135 | let jsonTypes = [ 136 | 'application/json' 137 | ]; 138 | 139 | let formTypes = [ 140 | 'application/x-www-form-urlencoded' 141 | ]; 142 | 143 | let textTypes = [ 144 | 'text/plain' 145 | ]; 146 | 147 | function parseQueryStr(queryStr) { 148 | let queryData = {}; 149 | let queryStrList = queryStr.split('&'); 150 | for (let [ index, queryStr ] of queryStrList.entries()) { 151 | let itemList = queryStr.split('='); 152 | queryData[ itemList[0] ] = decodeURIComponent(itemList[1]); 153 | } 154 | return queryData; 155 | } 156 | 157 | function bodyParser(opts = {}) { 158 | return async function(ctx, next) { 159 | // 拦截post请求 160 | if (!ctx.request.body && ctx.method === 'POST') { 161 | // 解析请求体中的表单信息 162 | let body = await readStream(ctx.request.req); 163 | let result = body; 164 | if (ctx.request.is(formTypes)) { 165 | result = parseQueryStr(body); 166 | } else if (ctx.request.is(jsonTypes)) { 167 | if (strictJSONReg.test(body)) { 168 | try { 169 | result = JSON.parse(body); 170 | } catch (err) { 171 | ctx.throw(500, err); 172 | } 173 | } 174 | } else if (ctx.request.is(textTypes)) { 175 | result = body; 176 | } 177 | 178 | // 将请求体中的信息挂载到山下文的request 属性中 179 | ctx.request.body = result; 180 | } 181 | await next(); 182 | }; 183 | } 184 | 185 | module.exports = bodyParser; 186 | 187 | ``` 188 | 189 | ### 使用 190 | 191 | ```js 192 | const Koa = require('koa'); 193 | const fs = require('fs'); 194 | const path = require('path'); 195 | const body = require('../index'); 196 | const app = new Koa(); 197 | 198 | app.use(body()); 199 | 200 | app.use(async(ctx, next) => { 201 | if (ctx.url === '/') { 202 | // 当GET请求时候返回表单页面 203 | let html = fs.readFileSync(path.join(__dirname, './index.html'), 'binary'); 204 | ctx.body = html; 205 | } else if (ctx.url === '/post' && ctx.method === 'POST') { 206 | // 当POST请求的时候，解析POST表单里的数据，并显示出来 207 | ctx.body = ctx.request.body; 208 | } else { 209 | // 其他请求显示404 210 | ctx.body = 'form post demo
231 | 236 |