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

时间：2021-05-26

基本语法

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章