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发送

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>

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

# vueresource # 请求数据 # vue # resource请求数据 # vue如何从接口请求数据 # vue.js实现请求数据的方法示例 # vuejs前后端数据交互之从后端请求数据的实例 # vue请求数据的三种方式 # vue 请求后台数据的实例代码 # vue中promise的使用及异步请求数据的方法 # vue中实现先请求数据再渲染dom分享 # 谈一谈vue请求数据放在created好还是mounted里好 # vue2实现数据请求显示loading图 # Vue.js+HighCharts实现动态请求展示时序数据 # 就会 # 或其他 # 类似于 # 回调 # 大家多多 # 后端 # 实现了 # Parameter # tr # header # odd # tbody # Type # Description # height # style # px # thead # width # method

返回目录在线咨询

上一篇：Python机器学习从数据清洗到模型部署的贯通流程【技巧】
下一篇：php怎么加载源码_php源码加载机制与引入方式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求