vue-resource是Vue提供的體格http請(qǐng)求插件，如同jQuery里的$.ajax，用來(lái)和后端交互數(shù)據(jù)的。

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

1.在項(xiàng)目跟目錄上安裝：

npm install vue-resource 

 2.引入resource插件

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

3.發(fā)送請(qǐng)求：

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) => { 
// 處理成功的結(jié)果}, (res) => { // 處理失敗的結(jié)果}); 

在發(fā)送請(qǐng)求后，使用then方法來(lái)處理響應(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ù)寫法，第二種是更為簡(jiǎn)潔的ES 6的Lambda寫法：

POST請(qǐng)求：

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

JSONP請(qǐng)求：

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

吐槽一下，現(xiàn)在應(yīng)該沒有用到JSON的了吧，有的話真呵呵呵了。

支持的HTTP方法

vue-resource的請(qǐng)求API是按照REST風(fēng)格設(shè)計(jì)的，它提供了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])
  

除了jsonp以外，另外6種的API名稱是標(biāo)準(zhǔn)的HTTP方法。當(dāng)服務(wù)端使用REST API時(shí)，客戶端的編碼風(fēng)格和服務(wù)端的編碼風(fēng)格近乎一致，這可以減少前端和后端開發(fā)人員的溝通成本。

options對(duì)象

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

emulateHTTP的作用

如果Web服務(wù)器無(wú)法處理PUT, PATCH和DELETE這種REST風(fēng)格的請(qǐng)求，你可以啟用enulateHTTP現(xiàn)象。啟用該選項(xiàng)后，請(qǐng)求會(huì)以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會(huì)設(shè)置為實(shí)際的HTTP方法。

Vue.http.options.emulateHTTP = true;

emulateJSON的作用

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

Vue.http.options.emulateJSON = true;

response對(duì)象

response對(duì)象包含以下屬性：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論