vue-resource基本使用方法

1、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，或者在請求失敗時，提供共通的處理方式。

2、安裝與引用

　　NPM： npm install vue-resource --save-dev

/*引入Vue框架*/ import Vue from 'vue'
/*引入資源請求插件*/ import VueResource from 'vue-resource'

/*使用VueResource插件*/ Vue.use(VueResource)

　　src引入，就直接引入文件便可，注意在要vue以後引入

3、語法

　　引入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方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。

　　then方法的回調函數也有兩種寫法，第一種是傳統的函數寫法，第二種是更爲簡潔的ES 6的Lambda寫法：

// 傳統寫法
this.$http.get('/someUrl', [options]).then(function(response){ // 響應成功回調
}, function(response){ // 響應錯誤回調
}); // Lambda寫法
this.$http.get('/someUrl', [options]).then((response) => { // 響應成功回調
}, (response) => { // 響應錯誤回調
});

　　一、支持的HTTP方法：vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

　　除了jsonp之外，另外6種的API名稱是標準的HTTP方法。當服務端使用REST API時，客戶端的編碼風格和服務端的編碼風格近乎一致，這能夠減小前端和後端開發人員的溝通成本。

　　二、options對象

　　發送請求時的options選項對象包含如下屬性：

　　三、emulateHTTP的做用

　　若是Web服務器沒法處理PUT, PATCH和DELETE這種REST風格的請求，你能夠啓用enulateHTTP現象。啓用該選項後，請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實際的HTTP方法。

Vue.http.options.emulateHTTP = true;

　　四、emulateJSON的做用

　　若是Web服務器沒法處理編碼爲application/json的請求，你能夠啓用emulateJSON選項。啓用該選項後，請求會以application/x-www-form-urlencoded做爲MIME type，就像普通的HTML表單同樣。

Vue.http.options.emulateJSON = true;

4、使用實例

var demo = new Vue({ el: '#app', data: { gridColumns: ['customerId', 'companyName', 'contactName', 'phone'], gridData: [], apiUrl: 'http://192.168.118.221:8080/api/customers' }, mounted: function() { this.getCustomers() }, methods: { getCustomers: function() { this.$http.get(this.apiUrl).then((response) => { this.$set('gridData', response.data) },(response) => { console.log("出錯了"); }).catch(function(response) { console.log(response) }) } } });

　　這段程序的then方法裏提供了successCallback，errorCallback。catch方法用於捕捉程序的異常，catch方法和errorCallback是不一樣的，errorCallback只在響應失敗時調用，而catch則是在整個請求到響應過程當中，只要程序出錯了就會被調用。

　　在then方法的回調函數內，你也能夠直接使用this，this仍然是指向Vue實例的。爲了減小做用域鏈的搜索，建議使用一個局部變量來接收this。

5、使用resource服務

　　vue-resource提供了另一種方式訪問HTTP——resource服務，resource服務包含如下幾種默認的action：

get: {method: 'GET'}, save: {method: 'POST'}, query: {method: 'GET'}, update: {method: 'PUT'}, remove: {method: 'DELETE'}, delete: {method: 'DELETE'}

　　一、resource對象也有兩種訪問方式

//全局訪問
Vue.resource //局部訪問
this.$resource

　　能夠結合URI Template一塊兒使用，如下示例的apiUrl都設置爲{/id}了：

apiUrl: 'http://211.149.193.19:8080/api/customers{/id}'

　　{/id}至關於一個佔位符，當傳入實際的參數時該佔位符會被替換。例如，{ id: vm.item.customerId}中的vm.item.customerId爲12，那麼發送的請求URL爲：http://211.149.193.19:8080/api/customers/12

　　二、使用實例

//使用get方法發送GET請求，下面這個請求沒有指定{/id}
getCustomers: function() { var resource = this.$resource(this.apiUrl), vm = this; resource.get().then((response) => { vm.$set('gridData', response.data); }).catch(function(response) { console.log(response); }) } //使用save方法發送POST請求，下面這個請求沒有指定{/id}
createCustomer: function() { var resource = this.$resource(this.apiUrl), vm = this; resource.save(vm.apiUrl, vm.item).then((response) => { vm.$set('item', {}); vm.getCustomers(); }); this.show = false; } //使用update方法發送PUT請求，下面這個請求指定了{/id}
updateCustomer: function() { var resource = this.$resource(this.apiUrl), vm = this; resource.update({ id: vm.item.customerId }, vm.item).then((response) => { vm.getCustomers(); }) }

6、使用inteceptor

　　攔截器能夠在請求發送前和發送請求後作一些處理。在response返回給successCallback或errorCallback以前，你能夠修改response中的內容，或作一些處理。 例如，響應的狀態碼若是是404，你能夠顯示友好的404界面。再好比咱們就用攔截器作了登陸處理，因此請求發送以前都要經過攔截器驗證當前用戶是否登錄，不然提示登陸頁面。

Vue.http.interceptors.push(function(request, next) { // ... // 請求發送前的處理邏輯 // ...
 next(function(response) { // ... // 請求發送後的處理邏輯 // ... // 根據請求的狀態，response參數會返回給successCallback或errorCallback
        return response }) })

　　一、攔截器實例：

　　（1）爲請求添加loading效果

　　經過inteceptor，咱們能夠爲全部的請求處理加一個loading：請求發送前顯示loading，接收響應後隱藏loading。

　　具體步驟以下：

//一、添加一個loading組件
<template id='loading-template'>
    <div class='loading-overlay'></div>
</template>

//二、將loading組件做爲另一個Vue實例的子組件
var help = new Vue({ el: '#help', data: { showLoading: false }, components: { 'loading': { template: '#loading-template', } } }) //三、將該Vue實例掛載到某個HTML元素
<div id='help'>
    <loading v-show='showLoading'></loading>
</div>

//四、添加inteceptor
Vue.http.interceptors.push((request, next) => { loading.show = true; next((response) => { loading.show = false; return response; }); });

　　咱們繼續，當用戶在畫面上停留時間過久時，畫面數據可能已經不是最新的了，這時若是用戶刪除或修改某一條數據，若是這條數據已經被其餘用戶刪除了，服務器會反饋一個404的錯誤，但因爲咱們的put和delete請求沒有處理errorCallback，因此用戶是不知道他的操做是成功仍是失敗了。你問我爲何不在每一個請求裏面處理errorCallback，這是由於我比較懶。這個問題，一樣也能夠經過inteceptor解決。

　　（2）爲請求添加共同的錯誤處理方法

//一、繼續沿用上面的loading組件，在#help元素下加一個對話框
<div id='help'>
    <loading v-show='showLoading' ></loading>
    <modal-dialog :show='showDialog'>
        <header class='dialog-header' slot='header'>
            <h3 class='dialog-title'>Server Error</h3>
        </header>
        <div class='dialog-body' slot='body'>
            <p class='error'>Oops,server has got some errors, error code: {{errorCode}}.</p>
        </div>
    </modal-dialog>
</div>

//二、給help實例的data選項添加兩個屬性
var help = new Vue({ el: '#help', data: { showLoading: false, showDialog: false, errorCode: '' }, components: { 'loading': { template: '#loading-template', } } }) //三、修改inteceptor
Vue.http.interceptors.push((request, next) => { help.showLoading = true; next((response) => { if(!response.ok){ help.errorCode = response.status; help.showDialog = true; } help.showLoading = false; return response; }); });

　　vue-resource是一個很是輕量的用於處理HTTP請求的插件，它提供了兩種方式來處理HTTP請求：

　　（1）使用Vue.http或this.$http

　　（2）使用Vue.resource或this.$resource

　　這兩種方式本質上沒有什麼區別，閱讀vue-resource的源碼，你能夠發現第2種方式是基於第1種方式實現的。

　　提供了攔截器：inteceptor能夠在請求前和請求後附加一些行爲，這意味着除了請求處理的過程，請求的其餘環節均可以由咱們來控制。