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。