GET和POST请求数据获取的使用方法

GET请求使用方法

在koa中，获取GET请求数据源头是koa中request对象中的query方法或querystring方法，query返回是格式化好的参数对象，querystring返回的是请求字符串，由于ctx对request的API有直接引用的方式，所以获取GET请求数据有两个途径。

1. 是从上下文中直接获取

请求对象ctx.query，返回如 { a:1, b:2 } 请求字符串 ctx.querystring，返回如 a=1&b=2

2. 是从上下文的request对象中获取

请求对象ctx.request.query，返回如 { a:1, b:2 } 请求字符串 ctx.request.querystring，返回如 a=1&b=2

GET请求demo

新建demo08.js文件，先输入如下代码

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    let url=ctx.url; //获取url
    // 从上下文中直接获取数据
    let ctx_query = ctx.query; //query返回格式化的对象
    let ctx_querystring = ctx.querystring; //querystring返回原字符
    // 从上下文的request对象中获取
    let request=ctx.request;
    let req_query=request.query; //query返回格式化好的对象
    let req_querystring=request.querystring; //querystring返回原字符串。
    ctx.body={
        url,
        ctx_query,
        ctx_querystring,
        req_query,
        req_querystring
    }
});
app.listen(3000,()=>{
    console.log('server is starting at port 3000');
});

打开localhost:3000端口可以看到显示的内容

{"url":"/","ctx_query":{},"ctx_querystring":"","req_query":{},"req_querystring":""}

因为没有传递参数，我们在url中加上两个参数https://localhost:3000/?username=buppt&age=24可以看到页面的内容变成了

{"url":"/?username=buppt&age=24","ctx_query":{"username":"buppt","age":"24"},"ctx_querystring":"username=buppt&age=24","req_query":{"username":"buppt","age":"24"},"req_querystring":"username=buppt&age=24"}

可以看到ctx_query和req_query是相同的，ctx_querystring和req_querystring也是相同的。

POST请求的接受

对于POST请求的处理，koa2没有封装获取参数的方法。所以获取Post请求需要以下步骤：

1. 解析上下文ctx中的原生node.js对象req。

2. 将POST表单数据解析成query string字符串.(例如:user=buppt&age=24)

3. 将字符串转换成JSON格式。

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

POST请求demo

新建demo09.js文件，输入以下代码。用node命令执行，展现的是一个表单页面，点击提交后发现服务器接受到了post请求。

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    //当请求时GET请求时，显示表单让用户填写
    if(ctx.url==='/' && ctx.method === 'GET'){
        let html =`
            <h1>Koa2 request post demo</h1>
            <form method="POST"  action="/">
                <p>userName</p>
                <input name="userName" /> <br/>
                <p>age</p>
                <input name="age" /> <br/>
                <p>webSite</p>
                <input name='webSite' /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body =html;
    //当请求时POST请求时
    }else if(ctx.url==='/' && ctx.method === 'POST'){
        ctx.body='接收到请求';
    }else{
        //其它请求显示404页面
        ctx.body='<h1>404!</h1>';
    }
})

app.listen(3000,()=>{
    console.log('server is starting at port 3000');
})

新建demo10.js文件，先将demo03的代码copy过来，并进行如下修改:

添加函数，解析上下文里node原生请求的POST参数

function parsePostData( ctx ) {
  return new Promise((resolve, reject) => {
    try {
      let postdata = "";
      ctx.req.addListener('data', (data) => {
        postdata += data
      })
      ctx.req.addListener("end",function(){
        let parseData = parseQueryStr( postdata )
        resolve( parseData )
      })
    } catch ( err ) {
      reject(err)
    }
  })
}

添加函数将字符串解析成JSON对象

function parseQueryStr( queryStr ) {
  let queryData = {}
  let queryStrList = queryStr.split('&')
  console.log( queryStrList )
  for (  let [ index, queryStr ] of queryStrList.entries()  ) {
    let itemList = queryStr.split('=')
    queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
  }
  return queryData
}

将post请求的处理ctx.body='接收到请求';改成如下

let pastData=await parsePostData(ctx);
ctx.body=pastData;

填写并提交表单后发现已经将表单数据解析成了Json格式：

{"userName":"buppt","age":"24","webSite":"https://buppt.github.io"}