基本語法
必須引入一個庫：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>