先看一段代码&＃xff1a;
export default {name: &＃39;app&＃39;,data() {return {articles: []}},created: function() {this.$http.get(&＃39;/api/user/order/list&＃39;, {productType: "1",pageNum: 1,pageLimit: 8}, {headers: {},emulateJSON: true}).then((response) &＃61;> {this.articles &＃61; response.data.data.list;}).catch(function(response) {console.log(response);});}
}
1、get传参数的坑&＃xff1a;加params对象传参
调用接口时所传的参数并没有传参成功&＃xff0c;后来去网上多方搜查资料&＃xff0c;原来get的请求参数需要放在params里面&＃xff0c;发现把传参方式修改成如下形式即可&＃xff1a;
{params: {productType: "1",pageNum: 1,pageLimit: 8}
}
和之前的传参方式不同&＃xff0c;这次我把参数加在了一个名为params的对象中&＃xff0c;再次打包后上传&＃xff0c;发现接口调用成功&＃xff01;当然你也可以把参数直接放在url中&＃xff0c;也是没有问题的。
注意&＃xff1a;jsonp只支持get&＃xff0c;写法和这个是一样的。
2、解析返回的数据&＃xff1a;获取到的数据需要JSON.parse()一下
response返回正常&＃xff0c;response.data返回正常。
发现vue-resource的GET方法返回的response不仅仅只是单纯的数据&＃xff0c;而是包含了请求头信息&＃xff0c;数据等等一系列的数据&＃xff0c;而vue-response也提供了提取数据的方法&＃xff1a;response.json()&＃xff1b;但response.json()无法获取&＃xff0c;response.body.data也无法获取
data返回的就不是JSON格式&＃xff0c;而是字符串的格式&＃xff1f;于是&＃xff0c;我在最开始获取数据的方式外&＃xff0c;加了一层JSON.parse
this.articles &＃61; JSON.parse(response.data).data.list;
数据获取成功。
3、使用post请求&＃xff1a;Vue.http.options.emulateJSON &＃61; true;
将问题1我们扩展下&＃xff0c;使用post请求&＃xff0c;发现参数是传不过去的。这里又要多扯一个知识点&＃xff1a;form data 和 request payload。
通过下面2张图&＃xff0c;我们就能看出区别
request payload&＃xff1a;
form data&＃xff1a;
这两个本质是发送交易的报文头中的Content-type&＃xff0c;我们都知道一般发请求报文中的特殊字符比如&＃43;等都会被转码&＃xff0c;那是因为默认的Content-Type用的是application/x-www-form-urlencoded&＃xff0c;也就是form data这种情况&＃xff0c;默认的报文都是这种格式的&＃xff0c;但原生ajax就不是&＃xff0c;原生ajax报文头用的是text/plain;charset&＃61;UTF-8&＃xff0c;在这种格式下大部分字符都是不编码的。这种差异就会产生一些问题&＃xff0c;比如我们碰到的这个post&＃xff0c;就是用的第二种方式&＃xff0c;所以那边接不到参数。思路也很简单&＃xff0c;就是改报文头。
使用时遇到这样的报错&＃xff1a;XMLHttpRequest cannot load XXX. Response for preflight has invalid HTTP status code 405)&＃xff1b;
这个$http请求和jquery的ajax还是有点区别&＃xff0c;这里的post的data默认不是以form data的形式&＃xff0c;而是request payload。
解决起来倒也很简单&＃xff1a;
&＃xff08;1&＃xff09;在vue实例中添加headers字段&＃xff1a;
http: {headers: {&＃39;Content-Type&＃39;: &＃39;application/x-www-form-urlencoded&＃39;}
}
&＃xff08;2&＃xff09;或者使用 vue 方面提供的更加简单做法&＃xff1a;
Vue.http.options.emulateJSON &＃61; true;
&＃xff08;3&＃xff09;axios请求的解决方法&＃xff1a;
//1、vue-resource请求的解决方法
import Vue from "vue"
import VueResource from "vue-resource"
Vue.use(VueResource)this.$http({url: "/api/341-1",headers: {&＃39;Content-Type&＃39;: &＃39;application/x-www-form-urlencoded&＃39;,},emulateJSON: true, //以application/x-www-form-urlencoded的请求头部发送参数method: "POST",body: {a: "12233",b: "12345"}
}).then(reponse &＃61;> {if (reponse.status &＃61;&＃61; "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: {&＃39;Content-Type&＃39;: &＃39;application/x-www-form-urlencoded&＃39;, //请求头部
},method: "POST",data: Qs.stringify({a: "12233",b: "12345"}) // 这里可以在发送请求之前对请求数据做处理&＃xff0c;比如form-data格式化等&＃xff0c;这里可以使用开头引入的Qs&＃xff08;这个模块在安装axios的时候就已经安装了&＃xff0c;不需要另外安装&＃xff09;
}).then(response &＃61;> {if (response.status &＃61;&＃61; "200") {console.log(response.data);}
})
京公网安备 11010802041100号