vue-resource文檔詳細解讀

　　Vue可以構建一個完全不依賴后端服務的應用，同時也可以與服務端進行數據交互來同步界面的動態更新。Vue通過插件的形式實現了基於AJAX，JSPNP等技術的服務端通信。

　　vue-resource是一個通過XMLHttpRequrest或JSONP技術實現異步加載服務端數據的Vue插件，提供了一般的 HTTP請求接口和RESTful架構請求接口，並且提供了全局方法和VUe組件實例方法。

一、參數配置

　　分為：全局配置、組件實例配置、調用配置

　　這三部分的優先級依次增高，優先級高的配置會覆蓋優先級低的配置。

1、全局配置

Vue.http.options.root = '/root';

2、組件實例配置

　　在實例化組件時可以傳入http選項來進行配置

new Vue({ http: { root: '/root', headers: { Authorization: '' } } })

3、方法調用時配置

　　在調用vue-resource請求方法時傳入選項對象

new Vue({ mounted: function() { // get 請求
        this.$http.get({ url: '', headers: { Authorization: '' } }).then(() => { // 請求成功回調
            }, () => { // 請求失敗回調
 }); } });

4、headers配置

　　通過headers屬性來配置請求頭。除了參數配置headers屬性可以設置請求頭外，在vue-resource中也提供了全局默認的headers配置

　　Vue.http.headers鍵值可以是HTTP方法名，common，custom三種類型。這三種類型的配置會進行合並，優先級從低到高依次是common,custom,HTTP方法名。

　　其中common對應的請求頭會在所有請求中設置，custom對應的請求頭在非跨域時設置，HTTP方法名對應的請求頭只有在請求的method匹配方法名時才會被設置。

二、基本HTTP調用

　　基本HTTP調用，即普通的GET，POST等基本的HTTP操作實際上執行增，刪，改，查是前后端開發人員共同約定的，並非通過HTTP的請求方法如GET表示獲取數據，PUT代表寫入數據，POST表示更新數據。

　　底層方法和便捷方法執行后返回一個Promise對象，可以使用Promise語法來注冊成功，失敗回調。

1、底層方法

　　全局的Vue.http方法和Vue組件的實例方法this.$http都屬於底層方法，他們根據所傳入option參數的method屬性來判斷請求方式是GET還是POST，亦或是其它的HTTP的合法方法。

//全局調用
Vue.http(option); //組件實例調用
this.$http(option)

　　全局調用和組件實例調用都是接收相同的option參數，都返回Promise對象。

　　不同的是，全局方式回調this指向window，而組建實例調用方式回調指向組件實例。

2、便捷方法

　　不同於底層方法，便捷方法是對底層方法的封裝，在調用時可以省去配置選項option中的method屬性。

　　vue-resource 提供的便捷方法：

1. get(url, [data], [options]);
2. post(url, [data], [options]);
3. put(url, [data], [options]);
4. patch(url, [data], [options]);
5. delete(url, [data], [options]);
6. jsonp(url, [data], [options]);

　　都是接受三個參數：

1. url（字符串），請求地址。可被options對象中url屬性覆蓋。
2. data（可選，字符串或對象），要發送的數據，可被options對象中的data屬性覆蓋。
3. options

3、請求選項對象

　　option對象的各屬性及含義：

url

　　url（字符串）請求的URL地址

method

　　method(字符串)默認值為GET，請求的HTTP方法(GET,POST等)

data

　　data(對象或字符串)，默認值為:''，需要發送給服務端的數據。

　　data屬性的值對method為POST，PUT，DElETE等請求會作為請求體來傳送，對於GET，JSONP等方式的請求將會拼接在URL查詢參數中。

params

　　params(對象)，默認值為：{}，用來替換url中的模板變量，模板變量中未匹配到的屬性添加在URL地址后邊作為查詢參數。

Vue.http({ url: 'http://example.com/{book}', params: { book: 'vue', cat: 1 } }); //最終url為： http //example.com/vue?cat=1

headers

　　headers(對象)，默認值為:{}，設置HTTP請求頭

xhr

　　xhr（對象），默認值為null，該對象中屬性都會應用到原生的xhr實例對象上。

upload

　　upload(對象)，默認值為null，該對象的屬性都會應用到原生的xhr實例對象的upload屬性上。

jsonp

　　jsonp(字符串)，默認值為:callback，JSONP請求中回調函數的名字。

Vue.http({ url: 'http://example.com/book', method: 'JSONP', jsonp: 'cb' }); //最終的URL地址為http: //example.com/book?cb=xxx //xxx 為 vue-resource 生成的隨機串

tiemout

　　timeout(數值)，默認為：0，單位為 ms。表示請求超時時間。0表示沒有超時限制。超時后，將會取消當前請求。

　　vue-resrouce內部通過攔截器注入超時取消邏輯。

if (request.timeout) { timeout = setTimeout(function() { reqest.cancel(); }, request.timeout); } // 超時后，Promise會被 reject，錯誤回調會被執行。

beforeSend

　　beforeSend（函數），默認值為:null，該函數接受請求選項對象作為參數。該函數在發送請求之前執行，vue-resource內部在攔截器最前端調用該方法。

emulateHTTP

　　emulateHTTP（布爾值），默認值為:false，當值為true時，用HTTP的POST方式PUT，PATCH，DELETE等請求，並設置請求頭字段HTTP_Method_Override為原始請求方法。

　　如果Web服務器無法處理PUT, PATCH和DELETE這種REST風格的請求，你可以啟用emulateHTTP現象。啟用該選項后，請求會以普通的POST方法發出，並且HTTP頭信息的X-HTTP-Method-Override屬性會設置為實際的HTTP方法。

emulateJSON

　　emulateJSON(布爾值)，默認值為：false，當值為true並且data為對象時，設置請求頭Content-Type的值為application/x-www-form-urlencoded；

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

crossOrigin

　　crossOrigin（布爾值），默認值為：null，表示是否跨域，如果沒有設置該屬性，vue-resource內部會判斷瀏覽器當前URL和請求URL是否跨域。

if (request.crossOrgin === null) { request.corssOrigin = corssOrigin(request); } if (request.corssOrigin) { if (!xhrCors) { request.client = xdrClient; } request.emulateHTTP = false; }

　　如果最終crossOrigin為true並且瀏覽器不支持CORS，即不支持XMLHttpRequest2時，則會使用XDomainRequest來請求。目前XDomainRequest 只有IE8，IE9 瀏覽器支持用來進行AJAX跨域。

reqponse對象

　　response對象包含服務端的數據，以及HTTP響應狀態，響應頭等信息。

1. data （對象或字符串）： 服務端返回的數據，已使用 JSON.parse 解析。
2. ok（布爾值）：當HTTP響應狀態碼在200~299區間時該值為true，表示響應成功。
3. status(數值)： HTTP響應狀態碼。
4. statusText(字符串)： HTTP響應狀態文本描述。
5. headers（函數）： 獲取HTTP響應頭信息，不傳參表示獲取整個響應頭，返回一個相應頭對象。傳參表示獲取對應的響應頭信息。
6. request(對象)

三、RESTful調用

　　RESTful調用就是客戶端通過HTTP動詞來表示增，刪，改，查實現對服務端數據操作的一種架構模式。

　　vue-resource提供全局調用Vue.resource，或者在組件實例上調用this.$rsource。

resource(url ,[params], [actions], [options]);

url

　　url（字符串）請求地址，可以包含占位符，會被parms對象中的同名屬性的值替換。

this.$resource('/books/{cat}', { cat: 1 }); // 解析的URL為：/books/1

params

　　params(可選，對象)，參數對象，可用來提供url中的占位符，多出來的屬性拼接url的查詢參數。

actions

　　actions(可選，對象)，可以用來對已有的action進行配置，也可以用來定義新的action。

　　默認的aciton配置為：

options

　　options(可選，對象)，resource方法執行后返回一個包含了所有action方法名的對象。其包含自定義的action方法

　　resource請求數據

var resouce = this.$resource('/books/{id}'); // 查詢 // 第一個參數為params對象，優先級高於resource發方法的params參數
resoure.get({ id: 1 }).then(function(response) { this.$set('item', response.item); }); // 保存 // 第二個參數為要發送的數據
resource.save({ id: 1 }, { item: this.item }).then(function() { // 請求成功回調
}, function() { // 請求失敗回調
}); resource.delete({ id: 1 }).then(function() { // 請求成功回調
}, function() { // 請求失敗回調 
});

四、攔截器

　　可以全局進行攔截器設置。攔截器在發送請求前或響應返回時做一些特殊的處理。

1、攔截器的注冊

Vue.http.interceptors.push({ request: function(request) { // 更改請求類型為POST
        request.method = 'POST'; return request; }, response: function(response) { // 修改返回數據
        response.data = [{ custom: 'custom' }]; return response; } });

2、工廠函數注冊

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

五、跨域AJAX

　　vue-resource中用到的CORS特性，和 XHMLHttpRequest2的替代品 XDomainRequest

　　XDomain只支持GET和POST兩種請求。如果要在vue-resource中使用其它方法請求，設置請求選項的emulateHTTP為true。

　　XHMLHttpRequest2 CORS、XHMLHttpRequest2提交AJAX請求還是和普通的XMLHttpRequset請求一樣，只是增加了一些新特性。

　　在提交AJAX跨域請求時，需要知道當前瀏覽器是支持XHMLHttpRequest2， 判斷方法使用 in 操作符檢測當前 XMLHttpRequest實例對象是否包含 withCredentials屬性，如果包含則支持CORS

var xhrCors = 'withCredentials' in new XMLHttpRequest();

　　在支持CORS的情況下，還需要服務端啟用CORS支持。

　　例如：需要從http://example.com:8080提交到http://example.com/8088，需要在http://example.com添加響應頭：Access-Control-Allow-Origin: *

XDomainRequest

　　如果vue-resource不支持XMLHttpRequest2,則會降級使用用XDomainRequest

Promise

　　vue-resource基本HTTP調用和RESTful調用action方法執行后都會返回一個Promise對象。該Promise對象提供了then，catch，finally。

var promise = this.$http.post( 'http://example.com/book/cretae', // 請求體中要發送給服務端數據
 { cat: '1', name: 'newBook' }, { headers: { 'Content-Type': 'x-www-form-urlencoded' } } ); promise.then(function(response) { // 成功回調
}, function(response) { // 失敗回調
}); promise.catch(function(response) { // 異常回調
}); promise.finally(function() { // 執行完成或者失敗回調后都會執行此邏輯。
}); //局部調用方式的所有回調函數的this都指向組件實例

url模板

　　vue-resource 使用url-template庫來解析url模板。

　　在vue-resourece方法請求傳參時，可以在url中放置花括號包圍的占位符。vue-resouce內部會使用url-template將占位符用params對象中的屬性進行替換。

question

　　如何發送JSONP請求？

　　vue-resouce提供三種調用方式進行跨域：

//1、全局方法
Vue.http({ url: 'http://example.com/books', // 參數部分，將會拼接在url之后
    params: { cat: 1 }, method: 'JSONP' }).then(function(response) { }, function() { //error
}); //2、實例底層方法
http.$http({ url: 'http://example.com/books', params: { cat: 1 }, method: 'JSONP' }) .then(function() { // this 指向當前組件實例
 }, function() { }); //3、實例便捷方法
this.$http.jsonp( 'http://www.example.com/books', { cat: 1 } ) .then(function() { }, function() { });

修改數據類型

　　如何修改發送給服務端的數據類型？

　　在默認情況下，對於PUT，PSOT，PATCH，DELETE等請求，請求頭中的Content-Type為appliaction/json即JSON類型。有時候需要將數據提交為指定類型如application/x-www-form-urlencoded,multipart/form-data,txt/plain等。

//1、全局headers配置
Vue.http.heaers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //2、實例配置
this.$http.post( 'http://example.com/books', // 成功回調
 function(data, status, request) { if (status == 200) { conslog.dir(data); } }, // 配置請求頭
 headres: { 'Content-Type': 'multipart/form-data' } ); // 實例配置的優先級高於全局配置

　　跨域請求需要服務端開啟CORS支持