TCG開發日志（6）Koa-body與Json的傳輸

在服務端和客戶端之間用http的方式傳遞json時，現在可以在客戶端用fetch發起請求：

var datas = {
　　foo:1,
　　bar:2
}

var ret = await fetch('/api/', {
　　method: 'POST',
　　headers:{
　　　　'Content-Type' : 'application/json'
　　},
　　body:JSON.stringify(datas)
});

 

本來在fetch后的URL中應該填寫localhost:3000/api的，但是在本地調試出現了跨域問題，這時可以通過設置webpack-dev-server的代理來解決。

在webpack.config.js的devServer中加入proxy項：

devServer:{
　　proxy:{
　　　　'/api/*':{
　　　　　　target:"http://localhost:3000/",
　　　　　　secure:false
　　　　}
　　}
}

 

服務端，此時在app.use(async ctx=>{})中，確實能收到相應的ctx，但如何獲取客戶端傳上來的JSON呢？用ctx.req.body或ctx.request.body都是拿不到的，

此時要用如下方法：

ctx.req.on('data', function(data){
　　console.log(data);
})

log出來的data是一個char buffer：

對照ASCII，它就是之前被JSON化的BODY：  {"foo":1,"bar":2}，當然，自己處理它不是不可以，有點麻煩。

koa的一個中間件koa-body可以方便的處理這個問題，先安裝它：

npm install koa-body --save

 

在處理body之前，先執行這個中間件就可以了，中間件會把最后的結果存放到ctx.request.body里。

import koabody from 'koa-body';

.....

app.use(koabody({}));

app.use(async ctx=>{
　　console.log(ctx.request.body);

　　ctx.body = {
　　　　message:"hello!"
　　}
})

 

於是能看到body中的foo:1和bar:2了，順便，用ctx.body向客戶端返回一個json，在客戶端可以用如下方法處理：

var retjson = await ret.json();

 

用上述方法就可以實現服務端和客戶端互相發送json。