数据获取 vue-resource
单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据...
vue-resource特点
vue-resource插件具有以下特点:
- 体积小
vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。 - 支持主流的浏览器
和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。 - 支持Promise API和URI Templates
Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。 - 支持拦截器
拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。
vue-resource使用
1.引入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
基本语法
- 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。
// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。
GET
- 说明:发送
JSONP
的方式与get请求相同
const url = 'http://vue.studyit.io/api/getnewslist'
this.$http.get(url)
.then(data => {
console.log(data)
console.log(data.body)
})
POST
// const url = 'http://182.254.146.100:8899/api/postcomment/17'
const url = 'http://vue.studyit.io/api/postcomment/17'
this.$http.post(url, {
content: '完美!'
}, {
emulateJSON: true
})
.then(data => {
console.log(data.body);
})
JSONP
const url = 'http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&×tamp=' + (new Date() - 0)
this.$http.jsonp(url)
.then(data => {
console.log(data.body);
})