async 和 await的使用

一、需求

点击按钮处理重复提交,想要通过disabled的方式实现。

但是点击按钮调用的方法里有ajax、跳转、弹窗等一系列逻辑操作,需要等方法里流程都走完,再把disabled设为false,这样下次点击按钮时就可以继续走方法里的ajax等操作。

ajax请求需要时间返回,需要等返回后才能把disabled设为false,这就要保证点击按钮里的方法是同步执行的;

ajax.then.then的实现方法嵌套的太多,可以使用async 和 await代替,async是异步的,需要靠 await达到同步效果

二、实现

addPaper里的所有操作,不管层级如何,每个都要使用async 和 await,保证代码都是同步执行的;

不是同步执行的话,ajax还没返回,就执行了下面的disabled=false,重复提交时拦截不住的。

保证了代码是同步执行的,就可以在addPaper.then里一个位置将disabled=false,不用在addPaper里每个位置都设置addPaper。

Builder.init({disabled:false //初始定义disabled为false,点击按钮时,可以继续执行方法里的操作
})
.method("onItemClick",function(e){// disabled=true,表示已经点击此按钮,并且此方法并未执行完成,直接return先不继续执行if(this.data.disabled){return false;}this.data.disabled = true //disabled=true,保证下次点击时拦截继续执行this.addPaper({jobid:item.JobId,dimensionid:'',interviewtype:1,checkexistinterview:1}).then(function(result){// addPaper里使用async和await,保证方法都是同步执行的,这里then方法里将disabled=false,表示点击按钮可以继续执行了that.data.disabled = false})
}) .method("addPaper",async function(args){let that = thisawait checkSession.getAppSession().then(async function(sessionKey){if(!util.session.signKey){await wx.navigateTo({url: '/pages/login/login?curjobid='+args.jobid+'&interviewtype='+args.interviewtype+'&dimensionid='+args.dimensionid,success:(e)=>{that.data.disabled = false},});}else{await that.toAddPaper(args)}})})builder.method("toAddPaper", async function (args) {let that = this;await http.promiseRequest({url: "/aivideo/addTempPaper",method: "POST",data: {},}).then(async (result)=>{});
})

延伸:

ajax是比较友好的一种方式,ajax通过async 和 await是可以实现同步的,addPaper里有wx.navigateTo跳转、微信wx.authorize授权摄像头、wxModel弹窗等时,就需要在addPaper内部在每一个位置添加disabled=false。

1、wx.navigateTo在跳转succes里添加disabled=false

2、wxModel弹窗,因为弹窗出来流程就走完了,直接弹窗位置加上disabled=false即可。

3、wx.authorize,就直接弹出来授权窗口了,在哪里加上disabled=false呢,授权窗口无非就同意和拒绝,在success同意和fail拒绝里加上disabled=false即可

二、原理

asyncawait 是 JavaScript 中用于处理异步操作的关键字,它们让代码更加简洁和易于理解,避免了传统的回调函数(callback)或 .then() 链式调用所带来的复杂性。asyncawait 是基于 JavaScript 的 Promise 的语法。

1. async 函数

async 关键字用来定义一个异步函数,表示该函数内部会有异步操作。异步函数总是返回一个 Promise,即使函数内部没有明确使用 return 返回一个 Promise,JavaScript 会自动把函数返回值包装在一个已解析的 Promise 中。

async function myFunction() {return 'Hello, world!';
}myFunction().then(result => {console.log(result); 
});

2. await 表达式

await 关键字只能在 async 函数内部使用,它用于等待一个 Promise 解析(resolve)并返回解析后的结果。如果 await 后面的表达式不是一个 Promise,那么它会自动将其转换为一个已解析的 Promise。

async function fetchData() {let response = await fetch('https://api.example.com/data');let data = await response.json();return data;
}fetchData().then(data => {console.log(data); // 输出从 API 获取的 JSON 数据
});

3. async 和 await 的工作原理

  • 当执行 await 时,JavaScript 会暂停函数的执行,直到 Promise 解析(resolve)或者拒绝(reject)。
  • 如果 Promise 被成功解析,await 会返回该值,函数会继续执行。
  • 如果 Promise 被拒绝,await 会抛出一个错误(相当于抛出 Promise.reject() 的错误),你可以使用 try...catch 来捕获和处理这个错误。

4. 使用 try...catch 捕获错误

在处理异步操作时,我们通常会使用 try...catch 来捕获潜在的错误(例如网络请求失败等)。

示例
async function fetchData() {try {let response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok');}let data = await response.json();return data;} catch (error) {console.error('Fetch error:', error);}
}fetchData();

5. 组合多个异步操作

你可以在 async 函数中使用多个 await 来依次执行多个异步操作。需要注意的是,await 会按顺序依次等待每个 Promise 完成,这可能导致不必要的延迟。如果有多个独立的异步操作,可以考虑并行执行它们。

示例:依次执行多个异步操作
async function fetchData() {let userResponse = await fetch('https://api.example.com/user');let userData = await userResponse.json();let postsResponse = await fetch(`https://api.example.com/posts?userId=${userData.id}`);let postsData = await postsResponse.json();return { userData, postsData };
}fetchData().then(data => console.log(data));

示例:并行执行多个异步操作

javascript
async function fetchData() {let userPromise = fetch('https://api.example.com/user');let postsPromise = fetch('https://api.example.com/posts');let [userResponse, postsResponse] = await Promise.all([userPromise, postsPromise]);let userData = await userResponse.json();let postsData = await postsResponse.json();return { userData, postsData };
}fetchData().then(data => console.log(data));

在这个例子中,Promise.all() 会并行执行两个请求,只有在两个请求都完成后,才会继续进行数据解析。这样可以提高效率,避免等待一个请求完成后再去发送另一个请求。

总结

  • async:用来声明异步函数,返回一个 Promise。
  • await:用来等待一个 Promise 被解析,通常与 async 配合使用。
  • 异常处理可以使用 try...catch 捕获和处理。
  • 可以使用 Promise.all() 来并行执行多个异步操作,避免串行执行造成的性能瓶颈。

async/await 使得异步代码的书写更加简洁直观,避免了回调地狱和 .then() 链式调用的层层嵌套,提升了代码的可读性和维护性。

二、wx跳转

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

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

相关文章

解决 idea windows 设置maven离线模式之后,maven继续请求远程仓库

在内网开发的时候经常遇到没有办法来链接远程仓库的情况,这个时候需要设置maven的离线模式。 idea windows 设置maven离线模式之后,maven继续请求远程仓库 当设置完离线模式之后,有的时候执行maven的命令会报错,提示请求远程失败…

StructuredStreaming (一)

一、sparkStreaming的不足 1.基于微批,延迟高不能做到真正的实时 2.DStream基于RDD,不直接支持SQL 3.流批处理的API应用层不统一,(流用的DStream-底层是RDD,批用的DF/DS/RDD) 4.不支持EventTime事件时间(一般流处理都会有两个时间:事件发生的事件&am…

Python_爬虫1_Requests库入门

目录 Requests库 7个主要方法 Requests库的get()方法 Response对象的属性 爬取网页的通用代码框架 理解requests库的异常 HTTP协议及Requests库方法 HTTP协议 HTTP协议采用URL作为定位网络资源的标识。 HTTP协议对资源的操作 理解PATCH和PUT的区别 HTTP协议与Requse…

万字长文解读深度学习——生成对抗网络GAN

🌺历史文章列表🌺 深度学习——优化算法、激活函数、归一化、正则化深度学习——权重初始化、评估指标、梯度消失和梯度爆炸深度学习——前向传播与反向传播、神经网络(前馈神经网络与反馈神经网络)、常见算法概要汇总万字长文解读…

深入理解 Vue v-model 原理与应用

一、引言 在 Vue.js 开发中,v-model是一个非常重要且强大的指令。它为开发者在处理表单输入和数据双向绑定等场景中提供了极大的便利。无论是新手还是有经验的开发者,深入理解v-model对于高效地构建 Vue 应用至关重要。本文将对v-model进行深入剖析,从其基本原理、使用方式…

学SQL,要安装什么软件?

先上结论,推荐MySQLDbeaver的组合。 学SQL需要安装软件吗? 记得几年前我学习SQL的时候,以为像Java、Python一样需要安装SQL软件包,后来知道并没有所谓SQL软件,因为SQL是一种查询语言,它用来对数据库进行操…

多窗口切换——selenium

获取窗口句柄(以Python Selenium为例) current_window_handle方法 用于获取当前窗口的句柄。句柄是一个标识符,用于唯一标识一个窗口。示例代码: from selenium import webdriverdriver webdriver.Chrome() driver.get("…

Java 反射:深入探索与应用实践

在 Java 编程世界里,反射机制犹如一把神奇的钥匙,能够在运行时动态地获取类的信息、访问和修改类的成员以及调用类的方法。它打破了传统编译时静态绑定的限制,为开发者提供了极大的灵活性和扩展性,使得 Java 程序能够实现诸如动态…

Leecode刷题C语言之统计好节点的数目

执行结果:通过 执行用时和内存消耗如下: 题目:统计好节点的数目 现有一棵 无向 树,树中包含 n 个节点,按从 0 到 n - 1 标记。树的根节点是节点 0 。给你一个长度为 n - 1 的二维整数数组 edges,其中 edges[i] [ai,…

【代码审计】常见漏洞专项审计-业务逻辑漏洞审计

❤️博客主页: iknow181 🔥系列专栏: 网络安全、 Python、JavaSE、JavaWeb、CCNP 🎉欢迎大家点赞👍收藏⭐评论✍ 0x01 漏洞介绍 1、 原理 业务逻辑漏洞是一类特殊的安全漏洞,业务逻辑漏洞属于设计漏洞而非实…

【408】SDN重点笔记

总特征:数据平面(负责转发)与控制平面(负责控制)分离 控制平面: 由服务器和软件组成。控制平面完成转发表,并分发。 路由器不再需要路由选择协议,不再交换信息,只负责收到…

git命令提交项目

此为linux下的命, windows的话,去掉sudo即可 *转载至链接 http://www.eqicode.com/ 1、进入项目代码根目录,执行: sudo git init 把这个目录变成git可以管理的仓库。此时在文件加下,会出现一个 .git的隐藏文件&#…

Redis的Zset在排行榜中应用

1.在pom文件导入&#xff1a; <!-- redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>org.springframew…

安全见闻1-5

涵盖了编程语言、软件程序类型、操作系统、网络通讯、硬件设备、web前后端、脚本语言、病毒种类、服务器程序、人工智能等基本知识&#xff0c;有助于全面了解计算机科学和网络技术的各个方面。 安全见闻1 1.编程语言简要概述 C语言&#xff1a;面向过程&#xff0c;适用于系统…

入门车载以太网(4) -- 传输层(TCP\UDP)

目录 1.ECU通信方式的变化 2.传输层概述 2.1 UDP 2.2 TCP 3. TCP和ISO 15765-2 1.ECU通信方式的变化 我们先回顾下两种通信方式&#xff1a;Signal-Based Messaging、Service-Based Messaging。 Signal-Based Messaging 基于信号的通信方式&#xff0c;例如CAN通信&…

Javascript中的深浅拷贝以及实现方法

目录 一、前言 二、深浅拷贝 1、浅拷贝 2、深拷贝 三、递归实现深拷贝 1、js库lodash里面cloneDeep内部实现了深拷贝 2、Json序列化 四、异常处理 throw try ... catch debugger 五、处理this 普通函数 箭头函数 六、改变this指向 call apply bind 七、防抖…

Tofu AI视频处理模块视频输入配置方法

应用Tofu产品对网络视频进行获取做视频处理时&#xff0c;首先需要配置Tofu产品的硬件连接关系与设备IP地址、视频拉流地址。 步骤1 Tofu设备点对点直连或者通过交换机连接到电脑&#xff0c;电脑IP配置到与Tofu默认IP地址同一个网段。 打开软件 点击右上角系统设置 单击左侧…

深入探索 React Hooks:原理、用法与性能优化全解

一、引言 在现代 React 开发领域,Hooks 已成为不可或缺的一部分,赋予函数组件强大功能,使其能胜任复杂任务。本文将全面剖析 React Hooks,助您深入理解并熟练运用。 二、React Hooks 是什么 (一)Hooks 出现的背景 早期 React 主要依赖类组件,其通过this.state管理状…

QT<30> Qt中使鼠标变为转圈忙状态

前言&#xff1a;当我们在写软件时&#xff0c;在等待阻塞耗时操作时可以将鼠标变为忙状态&#xff0c;并在一段时间后恢复状态&#xff0c;可以用到GxtWaitCursor&#xff1a;Qt下基于RAII的鼠标等待光标类。 一、效果演示 二、详细代码 在项目中添加C文件&#xff0c;命名为…

pom.xml和spring-config.xml

pom.xml: Spring的pom.xml文件是Maven项目中的核心配置文件&#xff0c;它并非直接由Spring框架提供&#xff0c;但Spring项目&#xff08;包括Spring Boot&#xff09;通常会使用pom.xml来管理项目的依赖、插件和构建配置。这一点得到了广泛的社区支持和官方文档的确认。在Sp…