当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue2学习笔记之请求数据交互vue-resource

Vue2学习笔记之请求数据交互vue-resource

2018年05月03日  | 移动技术网IT编程  | 我要评论

窃听风暴 下载,爱情保卫战20120211,没离开过 下载

基本语法

必须引入一个库：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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网