vue实现在一个方法执行完后执行另一个方法的示例
用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实现在一个方法执行完后执行另一个方法的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue在一个方法执行完后执行另一个方法
- react实现两个方法同时执行时,其中一个能够调用另一个的执行结果
- 利用vue组件自定义v-model实现一个Tab组件方法示例
- Implementing a timeout on a function,实现对一个方法执行时间进行限制
- 相邻div实现一个跟着另一个自适应高度示例代码
- 限制某方法执行时间的一个解决方案和实现
- 利用OnCreateControl实现控件风格一致(一个OnCreateControl方法的应用示例)
- python实现一个文件传递参数并执行另一个文件
- 方法中开启一个事务之后,能否调用另一个通过事务实现的函数?
- List的All方法使用问题:我用List1的All方法来确保List1的所有每个数组元素中是否包含Arr1中的任意元素,这个部分很难实现。 因为,没有一个数组中是否包含另一个数组中的任意元素这个功能
- 用js实现在加载完成一个页面后自动执行一个方法
- 在sql2000中,一个存储过程中调用另一个存储过程的实现方法
- C#: 一个方法执行超时 timeout 检查的实现
- 相邻div实现一个跟着另一个自适应高度示例代码
- 在一个方法调用之前保证另一个方法已经执行
- 多种方法实现当jsp页面完全加载完成后执行一个js函数
- asp.net 实现定时执行 一个方法(asp.net)(转)
- 用两种方法实现一个点绕着另一个点旋转
- java中如何实现重复执行一个方法(事)
- dos下怎样实现一个程序执行完后自动执行另一个程序,不是批处理