數據獲取 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);
})