GET请求
getInfo() {
this.$http.get('http://yapi.demo.qunar.com/mock/64532/bbyy_employee/user/aboutAs').then(function (result) {
console.log(result);
console.log(result.body);//拿到服务器返回成功的数据
console.log(result.data);
})
}
POST请求
- 发起post请求 application/x-wwww-form-urlencoded
- 手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
- 通过post方法的第三个参数，{emulateJSON:true} 设置提交的内容类型为 普通表单数据格式
postInfo() {
this.$http.post('http://yapi.demo.qunar.com/mock/65177/puredo-api/coupon/appletCouponInfo/getCoupon', {couponId:'4FBCAEE40DD1408C8BDC892518E8BD09',userId:1}, {emulateJSON: true}).then(function (result) {
console.log(result.body)
})
}
JSONP请求
jsonpInfo() {
//发起JSONP请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-resource 基本使用</title>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-resource-1.3.4.js"></script>
</head>
<body>
<div class="app">
<input type="button" value="GET" @click="getInfo">
<input type="button" value="POST" @click="postInfo">
<input type="button" value="JSONP" @click="jsonpInfo">
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
msg: '这是内容啊'
},
methods: {
getInfo() {
this.$http.get('http://yapi.demo.qunar.com/mock/64532/bbyy_employee/user/aboutAs').then(function (result) {
console.log(result);
console.log(result.body);//拿到服务器返回成功的数据
console.log(result.data);
})
},
postInfo() {
//发起post请求 application/x-wwww-form-urlencoded
//手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
//通过post方法的第三个参数，{emulateJSON:true} 设置提交的内容类型为 普通表单数据格式
this.$http.post('http://yapi.demo.qunar.com/mock/65177/puredo-api/coupon/appletCouponInfo/getCoupon', {couponId:'4FBCAEE40DD1408C8BDC892518E8BD09',userId:1}, {emulateJSON: true}).then(function (result) {
console.log(result.body)
})
},
jsonpInfo() {
//发起JSONP请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
})
</script>
</body>
</html>
