标签:
在服务端和客户端之间用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。
标签:
原文地址:http://www.cnblogs.com/wowbrionac/p/5689855.html