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. }
  18. // 将POST请求参数字符串解析成JSON
  19. function parseQueryStr( queryStr ) {
  20. let queryData = {}
  21. let queryStrList = queryStr.split('&')
  22. console.log( queryStrList )
  23. for ( let [ index, queryStr ] of queryStrList.entries() ) {
  24. let itemList = queryStr.split('=')
  25. queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
  26. }
  27. return queryData
  28. }

举个例子

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

例子代码

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

启动例子

  1. node post.js

访问页面

request-post-form

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

request-post-result