[Vue] : vue-resource 实现 get, post, jsonp请求
vue-resource 实现 get, post, jsonp请求
常见的数据请求类型:get,post,jsonp
除了vue-resource
之外,还可以使用axios
的第三方包实现实现数据的请求
vue-resource
官方文档
vue-resource 的配置步骤:
- 直接在页面中,通过
script
标签,引入vue-resource
的脚本文件;
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-resource-1.3.4.js"></script>
- 注意:引用的先后顺序是:先引用
Vue
的脚本文件,再引用vue-resource
的脚本文件;
- 发送get请求:
- 当发起get请求之后, 通过
.then
来设置成功的回调函数
- 当发起get请求之后, 通过
getInfo() { // get 方式获取数据
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
- 发送post请求:
postInfo() {
var url = 'http://127.0.0.1:8899/api/post';
// post 方法接收三个参数:
// 参数1: 要请求的URL地址
// 参数2: 要发送的数据对象
// 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
- 发送JSONP请求获取数据:
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
可以通过全局配置,设置BaseURL等参数,例如:
Vue.http.options.root = 'http://vue.studyit.io/'
// 全局启用 emulateJSON 选项
Vue.http.options.emulateJSON = true
注意:如果我们通过全局配置了,请求的数据接口根域名,则在每次单独发起 http 请求的时候,请求的 url 路径,应该以相对路径开头,前面不能带/
,否则不会启用根路径做拼接。
http://www.cnblogs.com/moon1992/