koa2参数解析

koa是基于node.js的web开发框架，官网：https://koa.bootcss.com/ 。不做详细介绍；在node端与前端交互时，不可避免的就是接口请求。在获取请求参数的时候，koa是基于一些中间件来处理的，而且这些中间件很多，至少有koa-body,koa-bodyparser,koa-better-body,koa-multer等（这么多真让人头大）。这里以koa-body为例介绍一些常用的接口参数获取方法；

get请求

// server 端 demo.js
const Koa = require('koa')
const route = require('koa-route')
const koaBody = require('koa-body')({
    multipart: true
})
const app = new Koa()
app.use(koaBody)
const koaBodyTest = ctx => {
    const query=ctx.request.query
    const querystring=ctx.request.querystring
    ctx.response.body = {
        query, querystring
    }
}
app.use(route.get('/test/get', koaBodyTest))
app.listen(3001, () => {
    console.log('listen 3001')
})

// client端 demo.js
const axios =require('axios')
axios({
    url:'http://0.0.0.0:3001/test/get',
    params:{
        test:123
    }
}).then(res=>{
    console.log('response---->',res.data)
})

分别进入个字文件目录执行 node demo.js，可以看到client端的接口返回为：

response----> { query: { test: '123' }, querystring: 'test=123' }

post请求

koa自身没有封装关于post参数解析的方法，所以出现两种办法解析post参数。原生实现&中间件

原生方法

//server端 demo.js
const Koa = require('koa')
const route = require('koa-route')
const app = new Koa()
const handlePost = async (ctx) => {
    let data = '';
    await new Promise(reslove => {
        ctx.req.addListener('data', (chunk) => {
            data += chunk
        })
        ctx.req.addListener('end', (chunk) => {
            reslove()
        })
    })
    ctx.body = data
}
app.use(route.post('/test/post', handlePost))
app.listen(3001, () => {
    console.log('listen 3001')
})

// client端 demo.js

const axios = require('axios')
axios({
    url: 'http://0.0.0.0:3001/test/post',
    data: {
        test: 123
    },
    method: 'post'
}).then(res => {
    console.log('response---->', res.data)
})

分别执行各自的demo.js。client端的返回为：
response----> { test: 123 }

使用koa-body

// server端 demo.js
const Koa = require('koa')
const route = require('koa-route')
const koaBody = require('koa-body')({
    multipart: true
})
const app = new Koa()
app.use(koaBody)

const handlePost = async (ctx) => {
    ctx.response.body = ctx.request.body  
}
app.use(route.post('/test/post', handlePost))
app.listen(3001, () => {
    console.log('listen 3001')
})

const axios = require('axios')
axios({
    url: 'http://0.0.0.0:3001/test/post',
    data: {
        test: 123
    },
    method: 'post'
}).then(res => {
    console.log('response---->', res.data)
})

client返回代码：response----> { test: 123 }

formdata数据

// server端 demo.js
const Koa = require('koa')
const route = require('koa-route')
const koaBody = require('koa-body')({
    multipart: true
})
const app = new Koa()
app.use(koaBody)
const handlePost = async (ctx) => {
    ctx.response.body = ctx.request.body
}
app.use(route.post('/test/post', handlePost))
app.listen(3001, () => {
    console.log('listen 3001')
})

// client端 demo.js
const axios =require('axios')
const FormData = require('form-data'); 
const form = new FormData();
form.append('file', 'teset');
axios.post('http://0.0.0.0:3001/test/post', form).then(result => {
  console.log('response---->',result.data);
});

此时，client端的返回如下：response----> { '----------------------------511028953551316351151647\r\nContent-Disposition: form-data; name': '"file"\r\n\r\nteset\r\n----------------------------511028953551316351151647--\r\n' }

可以看到，koa没能解析formdata的数据，原因在于client发送请求的时候，没指定content-type。默认为：application/x-www-form-urlencoded。这个头，koa-body不能解析。而formdata的强大之处在于，可以执行form.getHeaders()，为请求添加合适的头。修改client端代码如下：

const axios =require('axios')
const FormData = require('form-data'); 
const form = new FormData();
form.append('file', 'teset');
axios.post('http://0.0.0.0:3001/test/post', form,{
  headers:form.getHeaders()
}).then(result => {
  console.log('response---->',result.data);
});

重新执行 client端代码，输出如下：response----> { file: 'teset' }