一. get 传参的坑:加params对象传参(不能直接get(url, params)!!!)
this.$http.get(url, {params: { offset: this.offset, label: this.categray }})
二. 使用post请求:
知识点
post参数的形式 form data(表单,通过url传参) 和 request payload(JSON, 通过请求体传参)
这两个本质是发送交易的报文头中的Content-type,我们都知道一般发请求报文中的特殊字符比如+等都会被转码,那是因为默认的Content-Type用的是application/x-www-form-urlencoded,也就是form data这种情况,默认的报文都是这种格式的,但原生ajax就不是,原生ajax报文头用的是text/plain;charset=UTF-8,在这种格式下大部分字符都是不编码的。这种差异就会产生一些问题,比如我们碰到的这个post,就是用的第二种方式,所以那边接不到参数。思路也很简单,就是改报文头。
vue-resource 默认采用 request payload 形式即 JSON 数据,后台需要在 请求体 中获得参数
若后台需通过表单的方式(即在 url 中) 获得参数,有如下三种方案:
- 在vue实例中添加headers字段:
http: {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
- 或者使用 vue 方面提供的更加简单做法:
- 全局设置,在main.js中加上
Vue.http.options.emulateJSON = true;
- 局部设置,在方法上加三第三个参数
this.$http.post('url', data, { emulateJSON: true })
三. 通过 POST 参数上传 (二进制)文件 时,请求参数需按一下步骤构建:
//二进制文件必须通过formData.append()加入,并以formData作为请求参数,否则请求中参数将成 { }let formData = new FormData();formData.append('binary', binaryFile)formData.append('key', value);
// 错误的示范,千万不要将formData包一层花括号,这会导致上传的值为{file: {}},也就是空值,这是一个陷阱this.$http.post(url, formData, { emulateJSON: true })
直接以input 获取的 file 对象作为POST 参数 会导致请求参数为 {} !!
FormData 类详细介绍