vue-resource（搬運）

一.vue-resource特色
vue-resource插件具備如下特色：

1. 體積小
vue-resource很是小巧，在壓縮之後只有大約12KB，服務端啓用gzip壓縮後只有4.5KB大小，這遠比jQuery的體積要小得多。

2. 支持主流的瀏覽器
和Vue.js同樣，vue-resource除了不支持IE 9如下的瀏覽器，其餘主流的瀏覽器都支持。

3. 支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含義爲「先知」，Promise對象用於異步計算。 URI Templates表示URI模板，有些相似於ASP.NET MVC的路由模板。

4. 支持攔截器
攔截器是全局的，攔截器能夠在請求發送前和發送請求後作一些處理。
攔截器在一些場景下會很是有用，好比請求發送前在headers中設置access_token，或者在請求失敗時，提供共通的處理方式。

二.vue-resource基本使用方法
1.安裝與引用

NPM：$ npm install vue-resource --save

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

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

2.語法

// 基於全局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) => {
    // 響應錯誤回調
});

 

關於options對象和response對象的說明能夠參見官方文檔。

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;

 

3.使用
我是用傳統的函數寫法，在各個組件的Vue實例中使用$http，而後將成功和錯誤回掉單獨拿出來聲明。在methods對象中寫好函數邏輯處理，而後在mounted()函數中調用它，這樣渲染這個組件的時候就會發送請求。固然，請求的地址和參數已經在data()函數中聲明，請求方式根據具體需求來。

 

在使用的時候遇到一個小坑,這個$http請求和jquery的ajax仍是有點區別，這裏的post的data默認不是以form data的形式，而是request payload。解決起來也很簡單，將emulateJSON 屬性設置爲true便可。

Vue.http.options.emulateJSON = true

按照API說明文檔，我請求回來的response只須要調用json()方法就能夠返回JSON對象，然而返回倒是Promise對象。看圖。我不太瞭解Promise，查了資料目前也沒整明白，文檔上面type是Promise，可是描述裏面又說是轉化成JSON對象。反正最後個人代碼裏是轉化了一下的，拿到JSON對象了咱們就能夠進行其餘邏輯處理了。

var data = JSON.parse(response.body);

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

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

 

5.proxy（代理）巨坑
場景：在本地serve發送API接口請求，那咱們得用跨域了吧，jsonp，可是咱們後端說跨域不安全，接口沒有實現跨域請求，就算開發時候跨域請求成功，那上線時不可能去修改全部的請求方式吧。因而就各類搜索解決方案，在打算用Nginx代理的時候，發現了Vue.js的webpack模板中自帶了一個代理，淚奔，趕忙修改。
文檔地址：https://vuejs-templates.github.io/webpack/proxy.html

 

三.總結
本文主要分享了vue-resource插件的安裝與使用，以及在使用的過程當中遇到的一些問題及處理方法，其中我認爲比較重要的點，也就是在開發過程當中可能遇到的坑並且在沒人告知的狀況下最容易卡住的地方已經在3.使用和5.proxy（代理）巨坑 中說明了，文中如有錯誤，請你們指出。

整個項目從基本構建到vue-router插件到vue-resource已經能夠實現整個項目的架構了，Vuex在這裏不適用也不作介紹，後期有機會將新增分享。接下來我將就項目中某些具體的功能實現和一些Vue的使用技巧上作一些分享。

參考文章：http://www.cnblogs.com/keepfool/p/5657065.html