vue resource发送请求的几种方式


Posted in Javascript onSeptember 30, 2019

vue resource发送请求,代码如下所示;

<!DOCTYPE html>
<html>
<head>
  <title>vue-resource</title>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
  </div>
</body>
<!-- 基于vue-resource实现get post请求 也可利用axios第三方包实现-->
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
<script>
  // vue-promise是基于vue的,所以引入CDN库时需要注意顺序,应先引入vue
  let vm = new Vue({
    el: "#app",
    data:{
    },
    methods:{//vue-resource发送请求是基于promise的
      getInfo(){
        this.$http.get('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json') 
        .then(res=>{
          console.log(res);
        })
      },
      postInfo(){
        this.$http.post('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/upload',{},{
          emulateJSON:true//设置这个参数相当于application/x-www-form-urlencoded,由于手动提交请求没有默认表单格式,需要设置发送的数据格式
        })
        .then(res=>{
          console.log(res.body);
        })
      },
      }
  });
</script>
</html>

知识点扩展;vue-resource请求的几种方式

vue resource发送请求的几种方式

安装import VueResource from 'vue-resource'

Vue.use(VueResource)
get //获取
getdesignatepl({commit,rootState}){
 // console.log("ppppp")
  let designate_list = `schedule-plan-configuration`;
  Vue.http.get(api.get(designate_list),{headers:rootState.headers}).then(function(response){
    let pup=response.data.data;
   // console.log(response)
  },function(response){
   // console.log("pl")
   var tipsObj = {
      title : "数据错误",
      flag: true,
      type: 4,
      btnGroup:['ook']
    }
    commit('popup',tipsObj,{root:true});
  })
 }
post//新增 
 setAdd({commit,rootState,state,dispatch,context},mss){
 Vue.http.post(api.save('schedule-plan-configuration'),mss,{headers:rootState.headers}).then(function(response){
   dispatch("getdesignatepl")
   commit('popup',titleObj,{root:true});
  },function(response){
   if(response.status == 422){
     commit('popup',tipsObj,{root:true});
  }
  })
 },
 //删除
 BrDelete(context,obj){
  let br_delete_put_data = `schedule-plan-configuration/${obj.id}`
  Vue.http.delete(api.get(br_delete_put_data),{headers:context.rootState.headers}).then(function(response){ 
   context.dispatch("getdesignatepl");
  },function(response){
    // console.log(response); 
    if(response.status == 401 || response.status == 500){
      var tipsObj = {
        status: response.status,
        flag: true,
        type: 4,
        btnGroup:['ook']
      }
      context.commit('popup',tipsObj,{root:true});
      return;
    }
  })
 },

 // 跟新
 getEntrySales({commit,rootState,dispatch,context},obj){
  // console.log(obj.id)
   Vue.http.put(api.update(`schedule-plan-configuration/${obj.id}`),obj, 
  {headers:rootState.headers}).then(function(response){
    dispatch("getdesignatepl");
    },function(response){
    })
 
 },

总结

以上所述是小编给大家介绍的vue resource发送请求的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery里的each使用方法详解
Dec 22 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
浅谈javascript中return语句
Jul 15 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 #Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 #Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 #Javascript
浅探express路由和中间件的实现
Sep 30 #Javascript
JavaScript实现单图片上传并预览功能
Sep 30 #Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 #Javascript
laravel实现中文和英语互相切换的例子
Sep 30 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Python3基础之函数用法
2014/08/13 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python reduce函数作用及实例解析
2020/05/08 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
Python中生成ndarray实例讲解
2021/02/22 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
入党政审材料范文
2014/12/24 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
晚会开幕词范文
2016/03/04 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android