title: vue-resource
date: 2017-03-09

• 開發(fā)技術(shù)
• vuejs

vue-resource作為vue插件的形式存在,通過XMLHttpRequest或JSONP發(fā)起請求并處理響應(yīng)

vue-resource

vue-resource插件具有以下特點：

體積小

vue-resource非常小巧，在壓縮以后只有大約12KB，服務(wù)端啟用gzip壓縮后只有4.5KB大小，這遠比jQuery的體積要小得多。

支持主流的瀏覽器

和Vue.js一樣，vue-resource除了不支持IE9以下的瀏覽器，其他主流的瀏覽器都支持。

支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含義為“先知”，Promise對象用于異步計算。
URI Templates表示URI模板，有些類似于ASP.NET MVC的路由模板。

支持攔截器

攔截器是全局的，攔截器可以在請求發(fā)送前和發(fā)送請求后做一些處理。
攔截器在一些場景下會非常有用，比如請求發(fā)送前在headers中設(shè)置access_token，或者在請求失敗時，提供共通的處理方式。

引入vue-resource

    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>

基本語法

http的使用

   引入vue-resource后，可以基于全局的Vue對象使用http，也可以基于某個Vue實例使用http。

   // 基于全局Vue對象使用http
   Vue.http.get('/Url', [options]).then(successCallback, errorCallback);
   Vue.http.post('/Url', [body], [options]).then(successCallback, errorCallback);
   // 在一個Vue實例內(nèi)使用$http
   this.$http.get('/Url', [options]).then(successCallback, errorCallback);
   this.$http.post('/Url', [body], [options]).then(successCallback, errorCallback);

語法書寫

在發(fā)送請求后，使用then方法來處理響應(yīng)結(jié)果，then方法有兩個參數(shù)，第一個參數(shù)是響應(yīng)成功時的回調(diào)函數(shù)，第二個參數(shù)是響應(yīng)失敗時的回調(diào)函數(shù)。then方法的回調(diào)函數(shù)也有兩種寫法，第一種是傳統(tǒng)的函數(shù)寫法，第二種是更為簡潔的ES 6的Lambda寫法：

    // 傳統(tǒng)寫法
    this.$http.get('/Url', [options]).then(function(response){  
    // 響應(yīng)成功回調(diào)
    }, 
    function(response){  
    // 響應(yīng)錯誤回調(diào)
     });
    // Lambda寫法
    this.$http.get('/Url', [options]).then((response) => { 
    // 響應(yīng)成功回調(diào)
    }, (response) => {    
    // 響應(yīng)錯誤回調(diào)
    });

支持的HTTP方法

vue-resource的請求API是按照REST風格設(shè)計的，它提供了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方法。當服務(wù)端使用REST API時，客戶端的編碼風格和服務(wù)端的編碼風格近乎一致，這可以減少前端和后端開發(fā)人員的溝通成本。

 客戶端請求方法             服務(wù)端處理方法
this.$http.get(...)          Getxxx
this.$http.post(...)         Postxxx
this.$http.put(...)          Putxxx
this.$http.delete(...)       Deletexxx

options對象

發(fā)送請求時的options選項對象包含以下屬性：

emulateHTTP的作用

如果Web服務(wù)器無法處理PUT, PATCH和DELETE這種REST風格的請求，你可以啟用enulateHTTP現(xiàn)象。啟用該選項后，請求會以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設(shè)置為實際的HTTP方法。

 Vue.http.options.emulateHTTP = true;

emulateJSON的作用

如果Web服務(wù)器無法處理編碼為application/json的請求，你可以啟用emulateJSON選項。啟用該選項后，請求會以application/x-www-form-urlencoded作為MIME type，就像普通的HTML表單一樣。

 Vue.http.options.emulateJSON = true;

response對象