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' }