javascript 使用async/await简化异步操作实践

news2024/11/18 23:44:48

实现的功能简述: 新增申请单时,申请单的业务日期由两个因素决定:

  1. 异步获取的仓库的业务日期。
  2. 异步获取的日期偏移天数规则。

业务日期 = 仓库的业务日期 + 偏移天数。比如仓库的业务日期是2023-01-01,偏移天数是5,那么最终的业务日期是2023-01-06

文章目录

  • (一)简单实现:方法嵌套执行(“函数瀑布”)
    • 1. 代码
    • 2. 执行结果
    • 3. 存在问题
  • (二)使用async/await
    • 1.代码
    • 2. 执行结果

(一)简单实现:方法嵌套执行(“函数瀑布”)

最简单的方式就是:在获取了仓库的业务日期之后,再调异步获取规则的方法。在日期和规则都获取到之后,再计算最终业务日期。

1. 代码

data() {
    return {
      dateRule: 0,
      warehouseDate: '',
    }
},

methods:{
    initData() {
      this.getWarehouseDate()
    },
    getWarehouseDate() {
      setTimeout(() => {
        this.warehouseDate = '2023-01-01'
        console.log("获取仓库业务日期:", this.warehouseDate, ";当前时间:", new Date().toLocaleTimeString())
        this.getDateRule()
      }, 2000)
    },
    getDateRule() {
      setTimeout(() => {
        this.dateRule = 5
        console.log("获取日期规则:", this.dateRule, ";当前时间:", new Date().toLocaleTimeString())

        this.getOffsetDate(this.warehouseDate, this.dateRule)
      }, 1000)
    },
    getOffsetDate(dayStr,  offset) {
      let dd = new Date(dayStr);
      dd.setDate(dd.getDate() + offset);

      console.log(dd.toLocaleDateString())
    },
}

2. 执行结果

通过结果我们可以看到:
即使获取仓库日期需要两秒,还是先执行了。程序可以按序执行并计算出期望的结果。
在这里插入图片描述

3. 存在问题

但是这样写有两个问题:

  1. 如果再来一个异步操作(比如编辑时,要先异步获取申请单,再获取仓库的业务日期,再获取日期规则),或者更多个异步函数,代码结构会变得极其复杂,可读性差。
  2. 复杂的代码结构也会导致维护困难,扩展性太差。

(二)使用async/await

1.代码

    async initData() {
      await this.getWarehouseDate()
      await this.getDateRule()
      this.getOffsetDate(this.warehouseDate, this.dateRule)
    },
     getWarehouseDate() {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.warehouseDate = '2023-01-01'
          console.log("获取仓库业务日期:", this.warehouseDate, ";当前时间:", new Date().toLocaleTimeString())
          resolve(this.warehouseDate)
        }, 1000)
      })
    },
    getDateRule() {
      return new Promise((resolve)=>{
        setTimeout(() => {
          this.dateRule = 5
          console.log("获取日期规则:", this.dateRule, ";当前时间:", new Date().toLocaleTimeString())
          resolve(this.warehouseDate)
        }, 2000)
      })
    },
    getOffsetDate(dayStr,  offset) {
      let dd = new Date(dayStr);
      dd.setDate(dd.getDate() + offset);

      console.log('计算最终日期:',dd.toLocaleDateString())
    },

2. 执行结果

可以看到按序执行了。
像写同步代码一样写异步代码。
res2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1035868.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【轨道机器人】成功驱动伺服电机(学生电源、DCH调试软件、DH系列伺服驱动器)

1、硬件平台 工控机 学生电源 DH系列伺服驱动器 电机 调试平台:DCH 2、如何利用dch驱动电机 点击可驱动电机 下面的步骤是比较关键的几步: 3、遇到的问题 不能成功驱动电机,还和厂家那边打电话,询问 发现是这…

霍金《时间简史》A Brief History of Time 学习笔记(第二章)

CHAPTER 2 : SPACE & TIME Footnote: Second chapter. Mainly talks about spacetime. Footnote: “Thought Experiment”, which is quite common in the field of physics. False: Galileo dropping weights from the Tower of Pisa (Assertedly) True: Galileo rolling…

【企业级SpringBoot单体项目模板 】——Mybatis-plus自动代码生成

😜作 者:是江迪呀✒️本文关键词:SpringBoot项目模版、企业级、模版☀️每日 一言:我们之所以这样认为,是因为他们这样说。他们之所以那样说,是因为他们想让我们那样认为。所以实践才是检验真理…

漏刻有时数据可视化Echarts组件开发(30):自定义方向的数据流向动画

let points = [{name: 市城市管理局,desc: {type: 1,},},{name: 科大讯飞,desc: {type: 2,},},{name: 市水利局,desc: {type: 1,},},{name: 市政法委,desc: {type: 1,},},{name: 市自然资源和规划局,desc: {type: 1,},},{name: 市生态环境局,desc: {type: 1,},},{name: 市大数据…

资源分享 | 情绪脑电研究公开数据集

SEED SEED数据集是由上海交大类脑计算与机器智能研究中心(BCMI)开发的。该数据集是基于脑电的情绪分类任务而设计的数据集。该数据集记录了15名被试在观看积极、中性和消极情绪电影片段时的EEG信号,每个视频片段的时间为3-5分钟。每个参与者重复采集三天&#xff0…

BST搜索二叉树

目录 二叉搜索树概念 ​编辑 1 二叉搜索树的构建 2. 二叉搜索树的删除 3二叉搜索树中放入元素 4. 二叉搜索树中元素的删除 5. 二叉搜索树中元素的遍历 6 二叉搜索树中元素的查找 7二叉搜索树的拷贝构造 二叉搜索树概念 二叉搜索树又称二叉排序树,它或者是一…

【lesson10】fork创建进程的现象解答

文章目录 fork现象fork问题 fork现象 我们先来看一段代码。 大家觉得这段代码的printf会打印几次? 结果: 我们可以清楚的看到,第二个printf打印了2次。 我们再来看一段不可思议的代码: 运行结果: 我们可以看到这r…

编写Dockerfile

Dockerfile 编写Dockerfile 制作 FROM java:7 MAINTAINER bunny <邮箱qq.com> ADD easybbs-web-release-1.0.jar app.jar CMD java -jar app.jar构建 docker build -f ./my_dockerfile -t app:1.0 .启动 docker rm my_app docker ps -a docker run -d -p 9000:7070 …

前端教程-总览

现已经更新完毕图中教程汇总后期收集所有教程资料整理

【考研】2023暨南大学848答案 2020-2023 计算机基础综合 830答案

&#x1f525;&#x1f525; I 仓库 还在更新&#xff0c;敬请期待 &#x1f525;暨南大学计算机848报考信息汇总仓库 仓库内有20年真题答案 https://github.com/zhanjuex/JNU_848 备用仓库 (目录可能用不了 https://xindon.coding.net/public/open/JNU_848/git/files &#x1…

基于springboot+vue的入校申报审批系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

基于Java+SpringBoot+Vue+Uniapp的美容预约平台小程序设计与实现(开题报告+任务书+源码+lw+ppt +部署文档+讲解)

文章目录 前言用户微信小程序端的主要功能有&#xff1a;管理员的主要功能有&#xff1a;具体实现截图详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考论文参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌…

Spring的后处理器-BeanFactoryPostprocessor

目录 Spring后处理器 Bean工厂后处理器-BeanFactoryPostProcessor 修改beanDefinition对象 添加beanDefiniton对象 方法一 方法二 自定义Component Spring后处理器 Spring后处理器是Spring对外开放的重要拓展点&#xff08;让我们可以用添加自己的逻辑&#xff09;&…

使用 PyTorch 的计算机视觉简介 (4/6)

一、说明 在本单元中&#xff0c;我们将了解卷 积神经网络&#xff08;CNN&#xff09;&#xff0c;它是专门为 计算机视觉设计的。 多层卷积层允许我们从图像中提取某些图像模式&#xff0c;池化层&#xff0c;以及在 CIFAR-10上的表现。 二、多层 CNN 在上一个单元中&#xf…

拦截|篡改|伪造.NET类库中不限于public的类和方法

大家好&#xff0c;我是沙漠尽头的狼。 本文首发于Dotnet9&#xff0c;介绍使用Lib.Harmony库拦截第三方.NET库方法&#xff0c;达到不修改其源码并能实现修改方法逻辑、预期行为的效果&#xff0c;并且不限于只拦截public访问修饰的类及方法&#xff0c;行文目录&#xff1a;…

Mysql004:用户管理

前言&#xff1a;本章节讲解的是mysql中的用户管理&#xff0c;包括&#xff08;管理数据用户&#xff09;、&#xff08;控制数据库的访问权限&#xff09;。 目录 1. 查询用户 2. 创建用户 3. 修改用户密码 4. 删除用户 5. 权限控制 1. 查询用户 在mysql数据库中&#xff0…

P-GaN栅极HEMT开关瞬态分析中的动态栅极电容模型

标题&#xff1a;Dynamic Gate Capacitance Model for Switching Transient Analysis in P-GaN Gate HEMTs 摘要 在这项工作中&#xff0c;提出了一种用于P-GaN栅极HEMT的高效开关瞬态分析模型&#xff0c;该模型考虑了开关瞬态过程中的动态栅极电容CG(VDS, VGS)特性。同时&a…

【STM32教程】第五章 STM32的定时器

案例代码及相关资料下载链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1hsIibEmsB91xFclJd-YTYA?pwdjauj 提取码&#xff1a;jauj 1 定时器综述 1.1 定时器简介 TIM&#xff08;Timer&#xff09;定时器&#xff0c;最基本功能就是定时触发中断&#xff1…

python随手小练3

题目&#xff1a; 写出一个判断闰年的python代码&#xff1a; 闰年的条件&#xff1a; 如果N能够被4整除&#xff0c;并且不能被100整除&#xff0c;则是闰年 或者&#xff1a;N能被400整除&#xff0c;也是闰年 即&#xff1a;4年一润并且百年不润&#xff0c;每400年再润一…

前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th

目录 一、title: &#x1f49b; ​二、alt&#x1f499; 三、width/heigh&#x1f49c; 四、border ❤️ 五、超链接&#x1f49a; 六、target &#x1f497; 七、tr&#x1f495; 八、td&#x1f498; 九、th&#x1f49e; 十、rowspan 一、title: &#x1f49b; 快…