基礎(chǔ)語法

引入vue-resource后，可以基于全局的Vue對(duì)象使用http，也可以基于某個(gè)Vue實(shí)例使用http。

// 基于全局Vue對(duì)象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一個(gè)Vue實(shí)例內(nèi)使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在發(fā)送請(qǐng)求后，使用then方法來處理響應(yīng)結(jié)果，then方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是響應(yīng)成功時(shí)的回調(diào)函數(shù)，第二個(gè)參數(shù)是響應(yīng)失敗時(shí)的回調(diào)函數(shù)。

then方法的回調(diào)函數(shù)也有兩種寫法，第一種是傳統(tǒng)的函數(shù)寫法，第二種是更為簡潔的ES 6的Lambda寫法：

// 傳統(tǒng)寫法
this.$http.get('/someUrl', [options]).then(function(response){
    // 響應(yīng)成功回調(diào)
}, function(response){
    // 響應(yīng)錯(cuò)誤回調(diào)
});

// Lambda寫法
this.$http.get('/someUrl', [options]).then((response) => {
    // 響應(yīng)成功回調(diào)
}, (response) => {
    // 響應(yīng)錯(cuò)誤回調(diào)
});

methods

vue-resource提供了7種請(qǐng)求API：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

options對(duì)象

發(fā)送請(qǐng)求時(shí)的options選項(xiàng)對(duì)象包含以下屬性：

Example

post請(qǐng)求

{
  // POST /someUrl
  this.$http.post('/someUrl', {foo: 'bar'}).then(response => {

    // get status
    response.status;

    // get status text
    response.statusText;

    // get 'Expires' header
    response.headers.get('Expires');

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

發(fā)送一個(gè)get請(qǐng)求URL查詢參數(shù)和定制headers。

{
  // GET /someUrl?foo=bar
  this.$http.get('/someUrl', {params: {foo: 'bar'}, headers: {'X-Custom': '...'}}).then(response => {
    // success callback
  }, response => {
    // error callback
  });
}

獲取圖像,并使用blob ()方法提取圖像響應(yīng)的正文內(nèi)容。

{
  // GET /image.jpg
  this.$http.get('/image.jpg', {responseType: 'blob'}).then(response => {

    // resolve to Blob
    return response.blob();

  }).then(blob => {
    // use image Blob
  });
}

Interceptors

在response返回給successCallback或errorCallback之前，可以修改response中的內(nèi)容，或做一些處理。

Vue.http.interceptors.push((request, next) => {
        // ...
        // 請(qǐng)求發(fā)送前的處理邏輯
        // ...
    next((response) => {
        // ...
        // 請(qǐng)求發(fā)送后的處理邏輯
        // ...
        // 根據(jù)請(qǐng)求的狀態(tài)，response參數(shù)會(huì)返回給successCallback或errorCallback
        return response
    })
})