koa2接收post请求参数进行处理（四）

我们发起一个请求后，肯定不是做一个渲染这样，我们要对参数进行解析，最终返回，在koa2中是以下这样解决的：

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    //当请求时GET请求时，显示表单让用户填写
    // 我们利用上文中说到的ctx.method判断请求的类型
    if(ctx.url==='/' && ctx.method === 'GET'){
        let html =`
            <form method="POST"  action="/">
                <p>userName</p>
                <input name="name" /> <br/>
                <p>age</p>
                <input name="sex" /> <br/>
                <p>webSite</p>
                <input name='way' /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        // 如果是get请求我们把这个表单进行显示，当点击提交按钮时，我们以post的方式进行提交
        ctx.body =html;
        //当请求时POST请求时
    }else if(ctx.url==='/' && ctx.method === 'POST'){
        // 当请求为post请求的时候，我们需要解析post请求到的参数，所以调用parsePostData这个函数，并且把ctx作为上下文传递过去，因为我们要获取到里面的值进行处理
        // 这里的await相当于与延时的作用，跟async有区别，async是异步的
        let pastData=await parsePostData(ctx);
        // 最终把pastData编写到页面中
        ctx.body=pastData;
    }else{
        //其它请求显示404页面
        ctx.body='<h1>404!</h1>';
    }
})

/*
* 需要注意：这里我们使用了ctx.req.on来接收事件
* */
function parsePostData(ctx){
    // 利用ES6的语法new一个Promise对象，其中传递两个值，resolve是成功的，而reject是失败的
    return new Promise((resolve,reject)=>{
        try{
            // 对获取到的值进行处理
            let postdata="";
            ctx.req.on('data',(data)=>{
                postdata += data
            })
            ctx.req.addListener("end",function(){
                // 把我们在全局定义的postdata传递给parseQueryStr，进行格式的转化
                let parseData = parseQueryStr( postdata )
                // 把成功后的parseData传出去
                resolve(parseData);
            })
        }catch(error){
            // 把错误的信息返回出去
            reject(error);
        }
    });
}

/*POST字符串解析JSON对象*/
function parseQueryStr(queryStr){
    let queryData={};
    let queryStrList = queryStr.split('&');
    console.log(queryStrList);
    // 利用了ES6提供的forOf，可以找找相关的看看
    for( let [index,queryStr] of queryStrList.entries() ){
        // 进行切割
        let itemList = queryStr.split('=');
        console.log(itemList);
        queryData[itemList[0]] = decodeURIComponent(itemList[1]);
    }
    return queryData
}

app.listen(3001,()=>{
    console.log('success on port 3001');
})

我们使用node index.js进行启项目，在浏览器打开localhost:3001会看到下图所示的页面（刚进页面输入框是没有值的）

当我们填写了以后，我们提交表单，因为我们提交表单是用的post请求，在页面中会看到下图所示的json串

在这里我们可以看到，我们通过解析拿到了form表单所提交的json串。