13 请求数据获取

1.0 前言

我们一般常用 get， post 请求的方式从页面带参数，数据到服务端，服务端获取这些参数后，做各种处理，这节我们学习怎么获取这些参数。

2.0 Get 请求数据获取

在 Koa 中，获取 Get 请求数据源头是 Koa 中 Request 对象中的 query 方法或 querystring 方法，query 返回是格式化好的参数对象，querystring 返回的是请求字符串，事例代码如下：

// 请求 http://localhost:8080/user/detail?userName=123&id=1
// controller/user.js
function getUser(ctx) {
  ctx.query //返回 { userName:123, id: 1 }
  ctx.request.query //返回 { userName:123, id: 1 }
  ctx.querystring // 返回 userName=123&id=1
  ctx.request.querystring // 返回 userName=123&id=1
}

3.0 路由参数获取

我们在请求的时候经常会使用 `http://localhost:8080/user/detail/${userId}` 这种方式获取数据，这种路由风格看起来非常直观，这种我们通过 ctx.param 获取。

// router.js
const { detail } = require('./controller/user')
router.get('/user/detail/:id', detail)

4.0 Post 请求参数获取

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

// router.js
const {
    list,
    detail,
    add
} = require('./controller/user')
router.post('/user/add', add)
// controller/user.js
function add(ctx) {
    const getData = () => {
        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)
            }
        })
    }
    return getData().then(data => {
        console.log(data)
        array.push({
            id: array.length,
            ...data
        })
        ctx.body = {
            success: true
        }
    })
}
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
}

可以查看 demo http://localhost:3000/ ，查看具体效果。

5.0 koa-bodyparser 中间件

对于 Post 请求的处理，koa-bodyparser 中间件可以把Koa 上下文的 formData 数据解析到ctx.request.body 中。

安装依赖

npm install --save koa-bodyparser

使用中间件

// app.js
const Koa = require('koa')
const app = new Koa()
const bodyParser = require('koa-bodyparser')
app.use(bodyParser())
// controller/user.js
function add(ctx) {
    const postData = ctx.request.body // 
}

可以看到使用中间件会方便很多，减少大段代码。

6.0 总结

这节我们学习了，在 Get，Post 请求中如何获取数据，日常开发中使用非常多，大家可以仔细看看，Demo 地址