vue-resource的使用中需要注意的坑
2018-03-28 19:35
661 查看
先看一段代码:
和之前的传参方式不同,这次我把参数加在了一个名为params的对象中,再次打包后上传,发现接口调用成功!当然你也可以把参数直接放在url中,也是没有问题的。
注意:jsonp只支持get,写法和这个是一样的。
发现vue-resource的GET方法返回的response不仅仅只是单纯的数据,而是包含了请求头信息,数据等等一系列的数据,而vue-response也提供了提取数据的方法:response.json();但response.json()无法获取,response.body.data也无法获取
data返回的就不是JSON格式,而是字符串的格式?于是,我在最开始获取数据的方式外,加了一层JSON.parse
数据获取成功。
通过下面2张图,我们就能看出区别
request payload:
form data:
这两个本质是发送交易的报文头中的Content-type,我们都知道一般发请求报文中的特殊字符比如+等都会被转码,那是因为默认的Content-Type用的是application/x-www-form-urlencoded,也就是form data这种情况,默认的报文都是这种格式的,但原生ajax就不是,原生ajax报文头用的是text/plain;charset=UTF-8,在这种格式下大部分字符都是不编码的。这种差异就会产生一些问题,比如我们碰到的这个post,就是用的第二种方式,所以那边接不到参数。思路也很简单,就是改报文头。
使用时遇到这样的报错:XMLHttpRequest cannot load XXX. Response for preflight has invalid HTTP status code 405);
这个$http请求和jquery的ajax还是有点区别,这里的post的data默认不是以form data的形式,而是request payload。
解决起来倒也很简单:
(1)在vue实例中添加headers字段:
(2)或者使用 vue 方面提供的更加简单做法:
(3)axios请求的解决方法:
export default { name: 'app', data() { return { articles: [] } }, created: function() { this.$http.get('/api/user/order/list', { productType: "1", pageNum: 1, pageLimit: 8 }, { headers: { }, emulateJSON: true }).then((response) => { this.articles = response.data.data.list; }).catch(function(response) { console.log(response); }); } }
1、get传参数的坑:加params对象传参
调用接口时所传的参数并没有传参成功,后来去网上多方搜查资料,原来get的请求参数需要放在params里面,发现把传参方式修改成如下形式即可:{ params: { productType: "1", pageNum: 1, pageLimit: 8 } }
和之前的传参方式不同,这次我把参数加在了一个名为params的对象中,再次打包后上传,发现接口调用成功!当然你也可以把参数直接放在url中,也是没有问题的。
注意:jsonp只支持get,写法和这个是一样的。
2、解析返回的数据:获取到的数据需要JSON.parse()一下
response返回正常,response.data返回正常。发现vue-resource的GET方法返回的response不仅仅只是单纯的数据,而是包含了请求头信息,数据等等一系列的数据,而vue-response也提供了提取数据的方法:response.json();但response.json()无法获取,response.body.data也无法获取
data返回的就不是JSON格式,而是字符串的格式?于是,我在最开始获取数据的方式外,加了一层JSON.parse
this.articles = JSON.parse(response.data).data.list;
数据获取成功。
3、使用post请求:Vue.http.options.emulateJSON = true;
将问题1我们扩展下,使用post请求,发现参数是传不过去的。这里又要多扯一个知识点:form data 和 request payload。通过下面2张图,我们就能看出区别
request payload:
form data:
这两个本质是发送交易的报文头中的Content-type,我们都知道一般发请求报文中的特殊字符比如+等都会被转码,那是因为默认的Content-Type用的是application/x-www-form-urlencoded,也就是form data这种情况,默认的报文都是这种格式的,但原生ajax就不是,原生ajax报文头用的是text/plain;charset=UTF-8,在这种格式下大部分字符都是不编码的。这种差异就会产生一些问题,比如我们碰到的这个post,就是用的第二种方式,所以那边接不到参数。思路也很简单,就是改报文头。
使用时遇到这样的报错:XMLHttpRequest cannot load XXX. Response for preflight has invalid HTTP status code 405);
这个$http请求和jquery的ajax还是有点区别,这里的post的data默认不是以form data的形式,而是request payload。
解决起来倒也很简单:
(1)在vue实例中添加headers字段:
http: { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }
(2)或者使用 vue 方面提供的更加简单做法:
Vue.http.options.emulateJSON = true;
(3)axios请求的解决方法:
//1、vue-resource请求的解决方法 import Vue from "vue" import VueResource from "vue-resource" Vue.use(VueResource) this.$http({ url: "/api/341-1", headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, emulateJSON: true, //以application/x-www-form-urlencoded的请求头部发送参数 method: "POST", body: { a: "12233", b: "12345" } }).then(reponse => { if (reponse.status == "200") { console.log(response.data); } }) //2、axios请求的解决方法 import Vue from "vue" import axios from "axios" import Qs from "qs" axios({ url: "/api/341-1", headers: { 'Content-Type': 'application/x-www-form-urlencoded', //请求头部 }, method: "POST", data: Qs.stringify({ a: "12233", b: "12345" }) // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) }).then(response => { if (response.status == "200") { console.log(response.data); } })
相关文章推荐
- vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
- 使用Vue构建项目时需要注意的几个事项
- vue开发:VUE axios发送跨域请求需要注意的问题
- xFire在使用Spring2.5,设定文件配置记述中需要注意的问题
- 【转】Poco 1.4.2 HTTPClientSession/HTTPRequest 使用使用代理(proxy)需要注意的一点
- 指针使用时需要注意的问题
- 使用JSON需要注意的问题
- Delphi中多线程下使用使用 UniDAC+MSSQL 需要注意的问题
- 使用SPD做工作流的时候需要注意的一些点
- VC++使用CSocket发送HTTP Request时需要注意发送数据的编码格式
- 使用Windows Server 2012 Hyper-V在虚拟机中做群集需要注意的事项
- 使用SqlDataAdapter时,需要注意的几点(转)
- Junit使用过程中需要注意的诡异bug以及处理办法
- php中使用$_REQUEST需要注意的一个问题
- 在Firefox下使用insertRow需要注意参数
- 使用iperf时需要注意的问题
- 使用jQuery form validation v1.0 的朋友们需要注意了
- 在CI中的控制器需要使用构造函数时注意
- vue-resource使用笔记
- string使用需要注意的地方。