vue-resource发起get,post,jsonp请求
Posted Maple_XL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-resource发起get,post,jsonp请求相关的知识，希望对你有一定的参考价值。
vue-resource发起get,post,jsonp请求
以下是一个简单的 Get 请求实例，请求地址是一个js文件：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<!--vue-resource.min.js就是发起请求的js它依赖于vue.js所以它必须放在vue.js后面-->
<script src="../js/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getinfo">get请求</button>
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {},
methods: {
getinfo() {
Vue.http.get("../js/vue.js").then((result) => {
//this.$http.get("../js/vue.js").then((result) => {
// console.log(result.data);
console.log(result.body); //data和body效果一样，推荐使用body
}, () => {
alert("请求调用失败！");
});
}
}
});
</script>
</body>
</html>
post 请求和jsonp请求
post 发送数据到后端，需要第三个参数 {emulateJSON:true}。
emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getinfo">get请求</button>
<button @click="postinfo">post请求</button>
<button @click="jsonpinfo">jsonp请求</button>
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {},
methods: {
getinfo() {
Vue.http.get("../js/vue.js").then((result) => {
// this.$http.get("../js/vue.js").then((result) => {
console.log(result.body);
}, () => {
alert("请求调用失败！");
});
},
postinfo() {
//发送 post 请求
//第一个参数是请求地址，第二个是数据，第三个是
this.$http.post(‘http://vue.studyit.io/api/post‘, {}, {
emulateJSON: true
}).then(function (res) {
// document.write(res.body);
console.log(res.body);
}, function (res) {
console.log(res.status);
});
},
jsonpinfo() {//发送jsonp请求
this.$http.get("../js/vue.js").then((result) => {
console.log(result.body);
}, () => {
alert("请求调用失败！");
});
}
}
});
</script>
</body>
</html>
设置根域名
通过设置根域名可以更有效的管理请求地址
定义：
Vue.http.options.root = ‘根地址‘
使用
要想使根路径生效，需要使用相对路径，即url最前面没有/
下面是一个案例
//定义根域名
Vue.http.options.root = ‘../js‘;
//.....
//发送请求
this.$http.get(‘vue.js‘).then()
//上面的地址会自动被拼接成
//../js/vue.js
全局配置 emulateJSON
-
Vue.http.options.emulateJSON=true;
-
这样就可以在发送post请求时不设置emulateJSON参数了。
以上是关于vue-resource发起get,post,jsonp请求的主要内容，如果未能解决你的问题，请参考以下文章