Vue2学习笔记之请求数据交互vue-resource
程序员文章站
2023-11-09 22:14:40
基本语法
必须引入一个库：vue-resource
// 基于全局vue对象使用http
vue.http.get('/someurl', [option...
基本语法
必须引入一个库：vue-resource
// 基于全局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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。