基本语法
必须引入一个库: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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。