码迷,mamicode.com
首页 > Web开发 > 详细

TCG开发日志(6)Koa-body与Json的传输

时间:2016-07-20 22:53:41      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:

在服务端和客户端之间用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。

 

TCG开发日志(6)Koa-body与Json的传输

标签:

原文地址:http://www.cnblogs.com/wowbrionac/p/5689855.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!