koa-bodyparser 实现

请求代理上下文context实现

前言

狭义中间件的上下文代理，除了在实例化 let app = new Koa() 的时候将属性或者方法挂载到app.context 中，供后续中间件使用。另外一种方式是在请求过程中在顶端中间件(一般在第一个中间件)使用，把数据或者方法挂载代理到ctx 供下游中间件获取和使用。

这里 请求代理上下文实现 最代表性是官方提供的koa-bodyparser 中间件，这里基于官方原版用最简单的方式实现koa-bodyparser最简单功能。

常见请求代理上下文context实现过程

  • 请求代理ctx
  • 直接app.use()
  • 在请求过程中过载方法或者数据到上下文ctx
  • 一般在大部分中间件前加载，供下游中间件获取挂载的数据或方法

实现步骤

  • step 01 app.use()在中间件最顶端
  • step 02 拦截post请求
  • step 03 等待解析表单信息
  • step 04 把表单信息代理到ctx.request.body上
  • step 05 下游中间件都可以在ctx.request.body中获取表单数据

实现源码

demo源码

https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-05-03

  1. ## 安装依赖
  2. npm i
  4. ## 执行 demo
  5. npm run start
  7. ## 最后启动chrome浏览器访问
  8. ##  http://127.0.0.1:3000

依赖

请求体数据流解析方法

  1. module.exports = readStream;
  3. function readStream(req) {
  4.   return new Promise((resolve, reject) => {
  5.     try {
  6.       streamEventListen(req, (data, err) => {
  7.         if (data && !isError(err)) {
  8.           resolve(data);
  9.         } else {
  10.           reject(err);
  11.         }
  12.       });
  13.     } catch (err) {
  14.       reject(err);
  15.     }
  16.   });
  17. }
  19. function isError(err) {
  20.   return Object.prototype.toString.call(err).toLowerCase() === '[object error]';
  21. }
  23. function streamEventListen(req, callback) {
  24.   let stream = req.req || req;
  25.   let chunk = [];
  26.   let complete = false;
  28.   // attach listeners
  29.   stream.on('aborted', onAborted);
  30.   stream.on('close', cleanup);
  31.   stream.on('data', onData);
  32.   stream.on('end', onEnd);
  33.   stream.on('error', onEnd);
  35.   function onAborted() {
  36.     if (complete) {
  37.       return;
  38.     }
  39.     callback(null, new Error('request body parse aborted'));
  40.   }
  42.   function cleanup() {
  43.     stream.removeListener('aborted', onAborted);
  44.     stream.removeListener('data', onData);
  45.     stream.removeListener('end', onEnd);
  46.     stream.removeListener('error', onEnd);
  47.     stream.removeListener('close', cleanup);
  48.   }
  50.   function onData(data) {
  51.     if (complete) {
  52.       return;
  53.     }
  54.     if (data) {
  55.       chunk.push(data.toString());
  56.     }
  57.   }
  59.   function onEnd(err) {
  60.     if (complete) {
  61.       return;
  62.     }
  64.     if (isError(err)) {
  65.       callback(null, err);
  66.       return;
  67.     }
  69.     complete = true;
  70.     let result = chunk.join('');
  71.     chunk = [];
  72.     callback(result, null);
  73.   }
  74. }

解读

  1. const readStream = require('./lib/read_stream');
  2. let strictJSONReg = /^[\x20\x09\x0a\x0d]*(\[|\{)/;
  4. let jsonTypes = [
  5.   'application/json'
  6. ];
  8. let formTypes = [
  9.   'application/x-www-form-urlencoded'
  10. ];
  12. let textTypes = [
  13.   'text/plain'
  14. ];
  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. }
  26. function bodyParser(opts = {}) {
  27.   return async function(ctx, next) {
  28.     // 拦截post请求
  29.     if (!ctx.request.body && ctx.method === 'POST') {
  30.       // 解析请求体中的表单信息
  31.       let body = await readStream(ctx.request.req);
  32.       let result = body;
  33.       if (ctx.request.is(formTypes)) {
  34.         result = parseQueryStr(body);
  35.       } else if (ctx.request.is(jsonTypes)) {
  36.         if (strictJSONReg.test(body)) {
  37.           try {
  38.             result = JSON.parse(body);
  39.           } catch (err) {
  40.             ctx.throw(500, err);
  41.           }
  42.         }
  43.       } else if (ctx.request.is(textTypes)) {
  44.         result = body;
  45.       }
  47.       // 将请求体中的信息挂载到山下文的request 属性中
  48.       ctx.request.body = result;
  49.     }
  50.     await next();
  51.   };
  52. }
  54. module.exports = bodyParser;

使用

  1. const Koa = require('koa');
  2. const fs = require('fs');
  3. const path = require('path');
  4. const body = require('../index');
  5. const app = new Koa();
  7. app.use(body());
  9. app.use(async(ctx, next) => {
  10.   if (ctx.url === '/') {
  11.     // 当GET请求时候返回表单页面
  12.     let html = fs.readFileSync(path.join(__dirname, './index.html'), 'binary');
  13.     ctx.body = html;
  14.   } else if (ctx.url === '/post' && ctx.method === 'POST') {
  15.     // 当POST请求的时候，解析POST表单里的数据，并显示出来
  16.     ctx.body = ctx.request.body;
  17.   } else {
  18.     // 其他请求显示404
  19.     ctx.body = '<h1>404！！！ o(╯□╰)o</h1>';
  20.   }
  22.   await next();
  23. });
  25. app.listen(3000, () => {
  26.   console.log('[demo] is starting at port 3000');
  27. });
  1. <html>
  2.   <head>
  3.     <title>example</title>
  4.   </head>
  5.   <body>
  6.     <div>
  7.       <p>form post demo</p>
  8.       <form method="POST" action="/post">
  9.         <span>data</span>
  10.         <textarea name="userName" ></textarea><br/> 
  11.         <button type="submit">submit</button>
  12.       </form>
  13.     </div> 
  14.   </body> 
  15. </html>

附录

参考

https://github.com/koajs/bodyparser