vue先後臺數據交互vue-resource文檔

 

Vue能夠構建一個徹底不依賴後端服務的應用，同時也能夠與服務端進行數據交互來同步界面的動態更新。

Vue經過插件的形式實現了基於AJAX，JSPNP等技術的服務端通訊。

vue-resource是一個經過XMLHttpRequrest或JSONP技術實現異步加載服務端數據的Vue插件

提供了通常的 HTTP請求接口和RESTful架構請求接口，而且提供了全局方法和VUe組件實例方法。

使用的版本是：vue-resource 0.7.2

 

配置

參數配置

分爲：

• 全局配置

• 組件實例配置

• 調用配置

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

全局配置

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

全局配置option屬性

 

組件實例配置

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

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

方法調用時配置

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

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

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語法來註冊成功，失敗回調。

底層方法

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

全局調用

Vue.http(option);

組件實例調用

this.$http(option)

全局調用和組件實例調用都是接收相同的option參數。都返回Promise對象。不一樣的是，全局方式回調this指向window，而組建實例調用方式回調指向組件實例。

組件實例方式發送POST請求

new Vue({ ready: function () { // POST請求 this.$http({ url: '', method: 'POST', // 請求體重發送的數據 data: { cat: 1 }, // 設置請求頭 headers: { 'Content-Type': 'x-www-from-urlencoded' } }).then(function () { // 請求成功回調 }, function () { // 請求失敗回調 }); } }); new Vue({ ready: function () { // POST請求 this.$http({ url: '', method: 'POST', // 請求體重發送的數據 data: { cat: 1 }, // 設置請求頭 headers: { 'Content-Type': 'x-www-from-urlencoded' } }).then(function () { // 請求成功回調 }, function () { // 請求失敗回調 }); } });

便捷方法

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

vue-resource 提供的便捷方法：

• get(url, [data], [options]);

• post(url, [data], [options]);

• put(url, [data], [options]);

• patch(url, [data], [options]);

• delete(url, [data], [options]);

• jsonp(url, [data], [options]);

都是接受三個參數：

• url（字符串），請求地址。可被options對象中url屬性覆蓋。

• data（可選，字符串或對象），要發送的數據，可被options對象中的data屬性覆蓋。

• options

便捷方法的POST請求：

this.$http.post( 'http://example.com', // 請求體重發送數據給服務端 { cat: 1, name: 'newBook' },{ 'headers': { 'Content-Type': 'x-www-form-urlencoded' } }).then(function () { // 成功回調 }, function () { // 失敗回調 });this.$http.post( 'http://example.com', // 請求體重發送數據給服務端 { cat: 1, name: 'newBook' },{ 'headers': { 'Content-Type': 'x-www-form-urlencoded' } }).then(function () { // 成功回調 }, function () { // 失敗回調 });

請求選項對象

option對象的各屬性及含義

參數	類型	描述
url	string	請求的URL
method	string	請求的HTTP方法，例如：'GET', 'POST'或其餘HTTP方法
body	Object,FormDatastring	request body
params	Object	請求的URL參數對象
headers	Object	request header
timeout	number	單位爲毫秒的請求超時時間 (0 表示無超時時間)
before	function(request)	請求發送前的處理函數，相似於jQuery的beforeSend函數
progress	function(event)	ProgressEvent回調處理函數
credentials	boolean	表示跨域請求時是否須要使用憑證
emulateHTTP	boolean	發送PUT, PATCH, DELETE請求時以HTTP
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發送

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 } });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' });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，錯誤回調會被執行。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風格的請求，你能夠啓用enulateHTTP現象。啓用該選項後，請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實際的HTTP方法。

若是服務器沒法處理PUT，PATCH和DELETE的請求。能夠啓用enulateHTTP。
啓用以後，請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實例的HTTP方法

Vue.http.options.emulateHTTP = true;

emulateJSON

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

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

Vue.http.options.emulateJSON = true;

crossOrigin

crossOrigin（布爾值）

默認值爲：null，表示是否跨域，若是沒有設置該屬性，vue-resource內部會判斷瀏覽器當前URL和請求URL是否跨域。

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

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

reqponse對象

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

• data （對象或字符串）： 服務端返回的數據，已使用 JSON.parse 解析。

• ok（布爾值）：當HTTP響應狀態碼在200~299區間時該值爲true，表示響應成功。

• status(數值)： HTTP響應狀態碼。

• statusText(字符串)： HTTP響應狀態文本描述。

• headers（函數）： 獲取HTTP響應頭信息，不傳參表示獲取整個響應頭，返回一個相應頭對象。傳參表示獲取對應的響應頭信息。

• request(對象)

RESTful調用

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

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

resource(url ,[params], [actions], [options]);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配置爲：

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

修改默認值action配置

this.$resource(
    '/books/{cat}', 
    {
        cat: 1
    }, {
        charge: {
            method: 'POST',
            params: { charge: true } } });

actions對象中的單個action如charge對象能夠包含options中的全部屬性，且有限即高於iotions對象

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

攔截器

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

攔截器的註冊

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

工廠函數註冊

Vue.http.interceptors.push(function () { return { request: function ( request ) { return request; }, response: function ( response ) { return response; } } });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 }); });Vue.http.interceptors.push(function ( request, next ) { // 請求發送前的處理邏輯 next(function () { // 請求發送後的處理邏輯 // 更具請求的狀態， response參數會返回給 successCallback或errorCallback return response }); });

實現的功能：

• AJAX請求的loading界面

Vue.http.interceptors.push((request, next) => {
    // 經過控制 組件的`v-show`值顯示loading組件
    loading.show = true; next((response) => { loading.show = false 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

若是vue0resource不支持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都指向組件實例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內部會使用url0template將佔位符用params對象中的屬性進行替換。

question

如何發送JSONP請求

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

全局方法

Vue.http({ url: 'http://example.com/books', // 參數部分，將會拼接在url以後 params: { cat: 1 }, method: 'JSONP' }) .then(function ( response ){ }, function () { //error });Vue.http({ url: 'http://example.com/books', // 參數部分，將會拼接在url以後 params: { cat: 1 }, method: 'JSONP' }) .then(function ( response ){ }, function () { //error });

實例底層方法

http.$http({ url: 'http://example.com/books', params: { cat: 1 }, method: 'JSONP' }) .then(function () { // this 指向當前組件實例 }, function () { });http.$http({ url: 'http://example.com/books', params: { cat: 1 }, method: 'JSONP' }) .then(function () { // this 指向當前組件實例 }, function () { });

實例便捷方法

this.$http.jsonp( 'http://www.example.com/books', { cat: 1 } ) .then(function () { }, function () { });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等。

全局headers配置

Vue.http.heaers.post['Content-Type'] = 'application/x-www-form-urlencoded'

實例配置

this.$http.post( 'http://example.com/books', // 成功回調 function ( data, status, request ) { if ( status == 200 ) { consl.dir(data); } }, // 配置請求頭 headres: { 'Content-Type': 'multipart/form-data' } ); // 實例配置的優先級高於全局配置this.$http.post( 'http://example.com/books', // 成功回調 function ( data, status, request ) { if ( status == 200 ) { consl.dir(data); } }, // 配置請求頭 headres: { 'Content-Type': 'multipart/form-data' } ); // 實例配置的優先級高於全局配置

跨域請求出錯

跨域請求須要服務端開啓CORS支持