vue实现在一个方法执行完后执行另一个方法的示例


Posted in Javascript onAugust 25, 2018

用Promise来实现

function2(){
  // 你的逻辑代码 
  return Promise.resolve(/* 这里是需要返回的数据*/)
}

function3(){
  // 你的逻辑代码 
  return Promise.resolve(/* 这里是需要返回的数据*/)
}

// 调用
function1(){
  this.function2().then(val => { 
    this.function3();
  });
}

拓展知识:vue解决一个方法同时发送多个请求的问题

在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求。这是不允许出现的。

但是怎么解决这个问题呢?

一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就可以避免重复发送请求了。但是我发现这个有一个弊端,那就是:

如果,该事件有许多的验证,比如电话、邮箱格式是否正确呀,必填的是否填了呀等等。一旦你点击就把按钮disabled了,发现该填的没填,回去填完后发现按钮不能点了?那是因为刚才点击的时候被你disabled了,所以还得在验证的方法中取消按钮的disable。就造成了你点击的时候,第一步,将按钮disable了,然后一步一步向下验证,如果验证出错,得取消disable,当所有验证通过了,在请求的回调函数中,成功了也要取消disable,失败了也要取消disable,因为失败了用户多半还会继续点两次,不取消disable会让用户发现怎么点不了了。这就造成了全篇都是按钮disable的设置与取消。一旦有修改,很难维护的。

在vue中,有一个lodash,我们只需引入就可以使用了。

比如以下代码:

<template>
 <div>
  <div class="bindBtn">
   <button class="bindDataBtn" @click="postAction">提交</button>
  </div>
 </div>
</template>
<script>
import _ from 'lodash'
export default {
 data() {
  return {
  
  }
 },
 mounted() {
 
 },
 methods: {
  sendAjax(){
   /*这里是请求的接口、参数以及回调函数等*/
  },
  postAction(){
   this.doPostAction()
  }
 },
 created(){
  this.doPostAction = _.debounce(this.sendAjax,500);
 }
}
</script>

我们首先将发送请求的ajax方法写在一个函数里面,在这里就是sendAjax函数,其次,我们引入lodash,然后将sendAjax这个函数用一个方法自定义一下,在这里就是doPostAction,其中_是我们引入的lodash,_.debounce是一个限制操作频率的函数,里面的是500是毫秒单位。

当执行点击事件的时候,也就是postAction函数,我们只需要调用doPostAction这个函数就可以了,而那个500的功能就是你在这个时间段里,无论执行了多少次这个点击事件,它都只会执行一次。

这样就少了我们通篇disable来disable去

最后附上官网例子:点击前往

以上这篇vue实现在一个方法执行完后执行另一个方法的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery练习之表单验证实现代码
Dec 14 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
详解CocosCreator项目结构机制
Apr 14 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 #Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 #Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 #Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 #Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 #Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 #Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
javascript中的括号()用法小结
2014/04/14 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
Python的多态性实例分析
2015/07/07 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
法学毕业生自我鉴定
2013/11/08 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
高中语文课后反思
2014/04/27 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
工作收入证明模板
2014/10/10 职场文书
刑事和解协议书范本
2014/11/19 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
PHP RabbitMQ消息列队
2022/05/11 PHP