簡介
vue-resource是Vue.js的一款外掛，它可以通過XMLHttpRequest或JSONP發起請求並處理響應。也就是說，$.ajax能做的事情，vue-resource外掛一樣也能做到，而且vue-resource的API更為簡潔。

本文是基於之前的文章（Vue學習筆記進階篇——vue-cli安裝及介紹）vue-cli腳手架工具的。

基本語法
引入vue-resource後，可以基於全域性的Vue物件使用http，也可以基於某個Vue例項使用http。

/

/ 基於全域性Vue物件使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一個Vue例項內使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
 

以下是一個簡單的get使用示例：

// GET /someUrl
  this.$http.get('/someUrl').then(response => {
    // success callback
  }, response => {
    // error callback
  });

http方法列表

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

Response
返回物件的引數以及物件的方法如下：

Example
簡單的post提交

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

帶查詢引數和自定義請求頭的GET請求

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

獲取圖片並使用blob()方法從響應中提取圖片的主體內容。

// GET /image.jpg
this.$http.get('/image.jpg', {responseType: 'blob'}).then(response => {
  // resolve to Blob
  return response.blob();
}).then(blob => {
  // use image Blob
});

安裝
在終端通過cd命令進入到之前文章中建立的my-demo1專案目錄裡，然後使用以下命令進行安裝:

npm install vue-resource --save

–save引數的作用是在我們的包配置檔案package.json檔案中新增對應的配置。安裝成功後， 可以檢視package.json檔案，你會發現多了"vue-resource": "^1.3.4"的配置。具體如下：

"dependencies": {
    "vue": "^2.3.3",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0"
  },

**

使用

**
註冊
通過以上步驟，我們已經安裝好了vue-resource，但是在vue-cli中我們如何使用呢？
首先，我們需要在main.js檔案中匯入並註冊vue-resource:

import VueResource from 'vue-resource'
Vue.use(VueResource)

**

專案中呼叫

**
在此之前，我用php的laravel框架開發了一些簡單的api介面，用以接下來我們的測試。這裡我先介紹下，我的api介面的功能：

url: http://api.chairis.cn/api?app_id=123456&method=demo.run params:
app_id: 應用id, 我這邊提供了一個測試的id123456 method: 方法名稱，我這邊提供的測試方法為demo.run
功能：這個方法的功能就比較簡單了，就是把上送的引數再返回來而已。

我們可以在瀏覽器中輸入上述url測試下是否能成功：

從圖中可以看出，返回的物件裡，data就是我們的上送的內容，當然你也可以加一些其他的引數，也同樣的會返回，只是app_id, method必須是正確的，其他的隨便。如下：

既然我們的介面是沒有問題的，那麼，我們就試試我們的vue-resource的強大功能吧。這裡我們就在之前的DemoHome元件裡實現我們的測試吧。

get
修改DemoHome元件的javascript標籤的程式碼如下：

export default({
    name:'home',
    mounted:function () {
      this.$http.get('http://api.chairis.cn/api',{
          params:{
            app_id:'123456',
            method:'demo.run',
            name:'chain'
          }
      }).then(response => {
          console.log('請求成功')
      },
      response => {
          console.log('請求失敗')
      });
    }
  })

儲存後，重新整理頁面，可以從控制檯看到輸出了請求成功字樣。然後我們再看下請求和返回的資料：
請求：

響應：

post
修改DemoHome元件的javascript標籤的程式碼如下：

export default({
    name:'home',
    mounted:function () {
      this.$http.post('http://api.chairis.cn/api?app_id=123456&method=demo.run',{
          body: {
            name: {
              first_name: 'chain',
              last_name: 'zhang'
            },
            email: '[email protected]'
          }
      },{emulateJSON: true}).then(response => {
          console.log('請求成功')
      },
      response => {
          console.log('請求失敗')
      });
    }
  })

儲存後，重新整理頁面，可以從控制檯看到輸出了請求成功字樣。然後我們再看下請求和返回的資料：
請求：

響應：

在這裡我們看到了陌生的東西emulateJSON, 為什麼要加這個引數呢，想知道為什麼，那麼就把他去掉試試，去掉了，你會發現請求失敗了，報以下錯誤：

這是個跨域請求，沒有許可權的問題，但是已加上這個熟悉就可以了。那我們就來看看這到底是個什麼鬼。

emulateJSON
emulateJSON(布林值)
預設值為：false,當值為true並且data為物件時，設定請求頭Content-Type的值為application/x-www-form-urlencoded。

如果伺服器無法處理編碼為application/json的請求，可以啟用emulateJSON選項。啟用之後，請求會以application/x-www-form-urlencoded為MIME type，就像普通的HTML表單一樣。
而this.$http.post的data預設不是以form data的形式，而是request payload, 所以需要這樣設定。
當然，如果你覺得每次的請求都要加這個熟悉很麻煩的話，你也可以使用全域性配置，在main.js中註冊了vue-resource之後，新增以下程式碼即可：

Vue.http.options.emulateJSON = true;

另外還有個類似的屬性emulateHTTP.

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;

完

原文：http://www.chairis.cn/blog/article/35