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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
javascript 获取网页参数系统
Jul 19 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
jQuery取id有.的值的方法
May 21 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
js中new一个对象的过程
Feb 20 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
原生js滑动轮播封装
Jul 31 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
js实现蒙版效果
2020/01/11 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
用Django写天气预报查询网站
2018/10/21 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
是否有自动比较结构的方法
2015/06/03 面试题
八一慰问活动方案
2014/02/07 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
股东合作协议书
2014/09/12 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
终止劳动合同协议书
2014/10/05 职场文书
人民调解协议书范本
2014/10/11 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书