POST请求参数获取

原理

对于POST请求的处理，koa2没有封装获取参数的方法，需要通过解析上下文context中的原生node.js请求对象req，将POST表单数据解析成query string（例如：a=1&b=2&c=3），再将query string 解析成JSON格式（例如：{"a":"1", "b":"2", "c":"3"}）

注意：ctx.request是context经过封装的请求对象，ctx.req是context提供的node.js原生HTTP请求对象，同理ctx.response是context经过封装的响应对象，ctx.res是context提供的node.js原生HTTP请求对象。

具体koa2 API文档可见 https://github.com/koajs/koa/blob/master/docs/api/context.md#ctxreq

解析出POST请求上下文中的表单数据

demo源码

https://github.com/ChenShenhai/koa2-note/blob/master/demo/request/post.js

  1. // 解析上下文里node原生请求的POST参数
  2. function parsePostData( ctx ) {
  3.   return new Promise((resolve, reject) => {
  4.     try {
  5.       let postdata = "";
  6.       ctx.req.addListener('data', (data) => {
  7.         postdata += data
  8.       })
  9.       ctx.req.addListener("end",function(){
  10.         let parseData = parseQueryStr( postdata )
  11.         resolve( parseData )
  12.       })
  13.     } catch ( err ) {
  14.       reject(err)
  15.     }
  16.   })
  17. }
  19. // 将POST请求参数字符串解析成JSON
  20. function parseQueryStr( queryStr ) {
  21.   let queryData = {}
  22.   let queryStrList = queryStr.split('&')
  23.   console.log( queryStrList )
  24.   for (  let [ index, queryStr ] of queryStrList.entries()  ) {
  25.     let itemList = queryStr.split('=')
  26.     queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
  27.   }
  28.   return queryData
  29. }

举个例子

源码在 /demos/request/post.js中

例子代码

  1. const Koa = require('koa')
  2. const app = new Koa()
  4. app.use( async ( ctx ) => {
  6.   if ( ctx.url === '/' && ctx.method === 'GET' ) {
  7.     // 当GET请求时候返回表单页面
  8.     let html = `
  9.       <h1>koa2 request post demo</h1>
  10.       <form method="POST" action="/">
  11.         <p>userName</p>
  12.         <input name="userName" /><br/>
  13.         <p>nickName</p>
  14.         <input name="nickName" /><br/>
  15.         <p>email</p>
  16.         <input name="email" /><br/>
  17.         <button type="submit">submit</button>
  18.       </form>
  19.     `
  20.     ctx.body = html
  21.   } else if ( ctx.url === '/' && ctx.method === 'POST' ) {
  22.     // 当POST请求的时候，解析POST表单里的数据，并显示出来
  23.     let postData = await parsePostData( ctx )
  24.     ctx.body = postData
  25.   } else {
  26.     // 其他请求显示404
  27.     ctx.body = '<h1>404！！！ o(╯□╰)o</h1>'
  28.   }
  29. })
  31. // 解析上下文里node原生请求的POST参数
  32. function parsePostData( ctx ) {
  33.   return new Promise((resolve, reject) => {
  34.     try {
  35.       let postdata = "";
  36.       ctx.req.addListener('data', (data) => {
  37.         postdata += data
  38.       })
  39.       ctx.req.addListener("end",function(){
  40.         let parseData = parseQueryStr( postdata )
  41.         resolve( parseData )
  42.       })
  43.     } catch ( err ) {
  44.       reject(err)
  45.     }
  46.   })
  47. }
  49. // 将POST请求参数字符串解析成JSON
  50. function parseQueryStr( queryStr ) {
  51.   let queryData = {}
  52.   let queryStrList = queryStr.split('&')
  53.   console.log( queryStrList )
  54.   for (  let [ index, queryStr ] of queryStrList.entries()  ) {
  55.     let itemList = queryStr.split('=')
  56.     queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
  57.   }
  58.   return queryData
  59. }
  61. app.listen(3000, () => {
  62.   console.log('[demo] request post is starting at port 3000')
  63. })

启动例子

  1. node post.js

访问页面

request-post-form

提交表单发起POST请求结果显示

request-post-result