vue前後臺數據互動vue-resource文件

阿新 • • 發佈：2018-12-02

vue前後臺數據互動vue-resource文件

地址：https://segmentfault.com/a/1190000007087934

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

最終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'
    }
);
// 例項配置的優先順序高於全域性配置

跨域請求出錯

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

vue前後臺數據互動vue-resource文件