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 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JavaScript对象学习小结
Sep 02 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
详解angular应用容器化部署
Aug 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
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
js继承的实现代码
2010/08/05 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js图片处理示例代码
2014/05/12 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python 装饰器深入理解
2017/03/16 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
淘宝活动策划方案
2014/02/06 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
法定代表人证明书
2014/11/28 职场文书
优秀团员事迹材料
2014/12/25 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
MSSQL基本语法操作
2022/04/11 SQL Server