vue-resource是Vue提供的體格http請求插件，如同jQuery里的$.ajax，用來和后端交互數據的。

在使用時，首先需要安裝vue-resource插件

1.在項目跟目錄上安裝：

npm install vue-resource 

 2.引入resource插件

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

3.發送請求：

this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){   console.log(res)  }) 

ES6寫法：

this.$http.get('url', [options]).then((res) => { // 處理成功的結果}, (res) => { // 處理失敗的結果}); 

在發送請求后，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。

then方法的回調函數也有兩種寫法，第一種是傳統的函數寫法，第二種是更為簡潔的ES 6的Lambda寫法：

POST請求：

this.$http.post("http://www.vrserver.applinzi.com/aixianfeng/apihome.php",{name:"abc"},{emulateJSON:true}).then(    function (res) {     // 處理成功的結果     alert(res.body);    },function (res) {    // 處理失敗的結果    }   );

JSONP請求：

new Vue({ ready() {  this.$http.jsonp('/url', {name:"abc"}) .then(function (res){   console.log(res)  }, function (res) {   console.log(res)   });  } })

吐槽一下，現在應該沒有用到JSON的了吧，有的話真呵呵呵了。

支持的HTTP方法

vue-resource的請求API是按照REST風格設計的，它提供了7種請求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])
  

除了jsonp以外，另外6種的API名稱是標準的HTTP方法。當服務端使用REST API時，客戶端的編碼風格和服務端的編碼風格近乎一致，這可以減少前端和后端開發人員的溝通成本。

options對象

發送請求時的options選項對象包含以下屬性：

emulateHTTP的作用

如果Web服務器無法處理PUT, PATCH和DELETE這種REST風格的請求，你可以啟用enulateHTTP現象。啟用該選項后，請求會以普通的POST方法發出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設置為實際的HTTP方法。

Vue.http.options.emulateHTTP = true;

emulateJSON的作用

如果Web服務器無法處理編碼為application/json的請求，你可以啟用emulateJSON選項。啟用該選項后，請求會以application/x-www-form-urlencoded作為MIME type，就像普通的HTML表單一樣。

Vue.http.options.emulateJSON = true;

response對象

response對象包含以下屬性：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。