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: ‘‘
        }
    }
})

方法調用時配置

在調用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 () {
            // 請求失敗回調
        });
    }
});

便捷方法

不同於底層方法，便捷方法是對底層方法的封裝，在調用時可以省去配置選項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 () {
        // 失敗回調
    });

請求選項對象

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風格的請求，你可以啟用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]);

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 () {
    // 請求失敗回調    
});

攔截器

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

攔截器的註冊

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 ( 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都指向組件實例

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

    });

實例底層方法

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 () {
    
    });

修改數據類型

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

在默認情況下，對於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‘
    }
);
// 實例配置的優先級高於全局配置

vue-resource