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实现在一个方法执行完后执行另一个方法的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中实现methods一个方法调用另外一个方法

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时候  this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this

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

    用Promise来实现 function2(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) } function3(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) } // 调用 function1(){ this.function2().then(val => { this.function3(); }); } 拓展知识:vue解决一个方法同时发送多个请求的问题 在项目开发过程中

  • C#子线程执行完后通知主线程的方法

    C#子线程执行完后通知主线程的方法

    其实这个比较简单,子线程怎么通知主线程,就是让子线程做完了自己的事儿就去干主线程的转回去干主线程的事儿. 那么怎么让子线程去做主线程的事儿呢,我们只需要把主线程的方法传递给子线程就行了,那么传递方法就很简单了委托传值嘛: 下面有一个例子,子线程干一件事情,做完了通知主线程 public class Program { //定义一个为委托 public delegate void Entrust(string str); static void Main(string[] args) { Entr

  • Jquery on方法绑定事件后执行多次的实现方法

    Jquery on方法绑定事件后执行多次的实现方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • Jquery on方法绑定事件后执行多次的解决方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • Android在一个app中安装并卸载另一个app的示例代码

    Android在一个app中安装并卸载另一个app 1.在app→src→main下新建文件夹asserts,将准备安装的apk文件放在asserts内 2.在app→src→main→res下新建文件夹xml,右击xml文件夹,选择new→XML Resource File,File name为文件名,可随意,本文中为filepaths:Root element为资源类型,输入paths,确定并编辑以下代码: <?xml version="1.0" encoding="

  • PowerShel程序执行完后删除脚本自身的方法

    当脚本执行完成后,可以删除自身 复制代码 代码如下: #删除脚本自身 remove-item $MyInvocation.MyCommand.Path -force

  • 详解spring boot容器加载完后执行特定操作

    有时候我们需要在spring boot容器启动并加载完后,开一些线程或者一些程序来干某些事情.这时候我们需要配置ContextRefreshedEvent事件来实现我们要做的事情 1.ApplicationStartup类 public class ApplicationStartup implements ApplicationListener<ContextRefreshedEvent>{ public void onApplicationEvent(ContextRefreshedEve

  • 探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行

    复制代码 代码如下: $.ajax       ({            cache: false,            async: false,   // 太关键了,学习了,同步和异步的参数            dataType: 'json', type: 'post',            url: "../handle/Ladder_Fee_Code.ashx?ajaxaction=Select_FangAn",            success: functio

  • springboot项目启动后执行方法的三种方式

    目录 1 方法 方法1:spring的ApplicationListener< ContextRefreshedEvent>接口 方法2:springboot的ApplicationRunner接口 方法3:springboot的CommandLineRunner接口 2 指定执行顺序 3 原理 springboot项目启动后执行方法,有三种实现方式. 1 方法 ApplicationListener< ContextRefreshedEvent> 不推荐 ApplicationL

  • Linux中执行shell脚本的4种方法总结

    bash shell 脚本的方法有多种,现在作个小结.假设我们编写好的shell脚本的文件名为hello.sh,文件位置在/data/shell目录中并已有执行权限. 方法一:切换到shell脚本所在的目录(此时,称为工作目录)执行shell脚本: 复制代码 代码如下: cd /data/shell ./hello.sh ./的意思是说在当前的工作目录下执行hello.sh.如果不加上./,bash可能会响应找到不到hello.sh的错误信息.因为目前的工作目录(/data/shell)可能不在

随机推荐