說明：
我們項目現在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在實踐的過程中與本文所說的內容有較大區別的話看看是不是版本問題。
本文是一系列文章，在我對Vue有了更深刻的理解認識之後會對文章及時進行修改或更正，歡迎大家批評指出錯誤。以下是已完成的文章列表。
1. Vue.js系列之項目搭建（1）
2. Vue.js系列之項目結構說明（2）
3. Vue.js系列之vue-router(上)（3）
4. Vue.js系列之vue-router(中)（4）
5. Vue.js系列之vue-router(下)（5）
概述
前面五篇文章我們已經從簡單的項目搭建到清楚項目結構，以及詳細介紹了vue-router官方插件，現在我們要實現項目的動態數據交互，就要用到接口請求插件vue-resource，它不是Vue官方維護的插件，但是使用是最多的，它可以通過XMLHttpRequest或JSONP發起請求並處理響應。vue-resource有非常簡潔的API，還提供了非常有用的inteceptor（攔截器）功能，使用inteceptor可以在請求前和請求後附加一些行爲，比如使用inteceptor在ajax請求時顯示loading界面。下面我們就要了解一下吧。
項目地址：https://github.com/pagekit/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-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) => {
// 響應錯誤回調
});關於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的使用技巧上做一些分享。