基本語法
必須引入一個庫：vue-resource github地址
// 基于全局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);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])Options
| Parameter | Type | Description |
|---|---|---|
| url | string | 請求的UR |
| body | Object, FormData, string | request body |
| headers | Object | request header |
| params | Object | 請求的URL參數對象 |
| method | string | 請求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法 |
| timeout | number | 單位為毫秒的請求超時時間 (0 表示無超時時間) |
| before | function(request) | 請求發送前的處理函數，類似于jQuery的beforeSend函數 |
| progress | function(event) | ProgressEvent回調處理函數 |
| credentials | boolean | 表示跨域請求時是否需要使用憑證 |
| emulateHTTP | boolean | 發送PUT, PATCH, DELETE請求時以HTTP POST的方式發送，并設置請求頭的X-HTTP-Method-Override |
| emulateJSON | boolean | 將request body以application/x-www-form-urlencoded content type發送 |
1. 向文本發出get請求
準備一個1.txt 的文本數據，時面的內容是：welcomet to vue!!!
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ get:function(){ //發送get請求 this.$http.get('1.txt').then(function(res){ alert(res.body); },function(){ alert('請求失敗處理'); //失敗處理 }); } } }); } </script></head><body> <div id="box"> <input type="button" @click="get()" value="按鈕"> </div></body></html>上面代碼實現了，點擊按鈕，就發送get請求，成功就會執行彈窗 welcomet to vue!!!
2. 關于向后端請求，并帶參數的寫法
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ get:function(){ //發送get請求 this.$http.get('get.do',{a:1,b:2}).then(function(res){ alert(res.body); },function(){ alert('請求失敗處理'); //失敗處理 }); }, post:function(){ //發送post請求 this.$http.post('post.do',{a:1,b:2}).then(function(res){ alert(res.body); },function(){ alert('請求失敗處理'); //失敗處理 }); } } }); } </script></head><body> <div id="box"> <input type="button" @click="get()" value="按鈕get"> <input type="button" @click="post()" value="按鈕post"> </div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
