从零一起学koa2(4)---GET和POST请求数据获取

GET请求使用方法

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

是从上下文中直接获取

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

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

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

GET请求demo

新建app.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中加上两个参数http://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请求需要以下步骤：

解析上下文ctx中的原生node.js对象req。
将POST表单数据解析成query string字符串.(例如:user=buppt&age=24)
将字符串转换成JSON格式。

POST请求demo

新建app.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'){
        let pastData=await parsePostData(ctx);
		ctx.body=pastData;
    }else{
        //其它请求显示404页面
        ctx.body='<h1>404!</h1>';
    }
})
// 解析上下文里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)
    }
  })
}

// 将POST请求参数字符串解析成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
}

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

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

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

从零一起学koa2(4)---GET和POST请求数据获取

GET请求使用方法

GET请求demo

POST请求的接受

POST请求demo

猜你喜欢