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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
基于node.js之调试器详解
Aug 22 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
消息持续发送的完整例子
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python 链接和操作 memcache方法
2017/03/04 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python生成特定分布数的实例
2019/12/05 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
保护环境建议书300字
2014/05/13 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
求职简历自我评价2015
2015/03/10 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
详解php中流行的rpc框架
2021/05/29 PHP