Vue2学习笔记之请求数据交互vue-resource
更新时间：2017年02月23日 15:07:41 作者：＜/script＞
本篇文章主要介绍了Vue2学习笔记之数据交互vue-resource ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基本语法
必须引入一个库：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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧2018-10-10
这篇文章主要介绍了vue3动态添加路由,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
这篇文章主要为大家介绍了Vue的自定义事件内容分发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
vue3.0+vue-router+element-plus初实践
这篇文章主要介绍了vue3.0+vue-router+element-plus初实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要为大家详细介绍了vuex实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要给大家介绍了关于前端实现pdf预览功能的相关资料,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
一款移动优先的Solid.js路由solid router stack使用详解
这篇文章主要为大家介绍了一款移动优先的Solid.js路由solid router stack使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了Vue实现剪切板图片压缩功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
本篇文章主要介绍了vue之数据交互实例代码，vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，有兴趣的可以了解一下2017-06-06
本文通过实例代码给大家介绍了vue 下列表侧滑操作,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
最新评论