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 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
ajax异步请求详解
Jan 06 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
从零开始搭建一个react项目开发
Feb 09 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中调用JAVA
2006/10/09 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
js右键菜单效果代码
2007/07/21 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
新春文艺演出主持词
2014/03/27 职场文书
职务说明书范文
2014/05/07 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
英文版辞职信
2015/02/28 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
出生证明范本
2015/06/15 职场文书