溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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：
除了jsonp以外，另外6種的API名稱是標準的HTTP方法。當服務端使用REST API時，客戶端的編碼風格和服務端的編碼風格近乎一致，這可以減少前端和后端開發人員的溝通成本。
| 客戶端請求方法 | 服務端處理方法 |
|---|---|
| this.$http.get(...) | Getxxx |
| this.$http.post(...) | Postxxx |
| this.$http.put(...) | Putxxx |
| this.$http.delete(...) | Deletexxx |
options對象
發送請求時的options選項對象包含以下屬性：
| 參數 | 類型 | 描述 |
|---|---|---|
| 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回調處理函數 |
| credientials | boolean | 表示跨域請求時是否需要使用憑證 |
| emulateHTTP | boolean | 發送PUT, PATCH, DELETE請求時以HTTP POST的方式發送，并設置請求頭的X-HTTP-Method-Override |
| emulateJSON | boolean | 將request body以application/x-www-form-urlencoded content type發送 |
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對象包含以下屬性：
| 方法 | 類型 | 描述 |
|---|---|---|
| text() | string | 以string形式返回response body |
| json() | Object | 以JSON對象形式返回response body |
| blob() | Blob | 以二進制形式返回response body |
| 屬性 | 類型 | 描述 |
| ok | boolean | 響應的HTTP狀態碼在200~299之間時，該屬性為true |
| status | number | 響應的HTTP狀態碼 |
| statusText | string | 響應的狀態文本 |
| headers | Object | 響應頭 |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
