async 和 await的使用

devtools/2024/11/17 8:35:31/

一、需求

点击按钮处理重复提交,想要通过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.ppmy.cn/devtools/134661.html

相关文章

Java读取WPS excel.xlsx嵌入图片

1. 背景&原因 经常有读取Excel文件的需求,开发者大多使用apache poi或者基于此的工具进行excel内容读取,前不久遇到了一个需求,读取每一行内容,但每一行都包含图片文件,发现无法通过已封装的工具读取excel的图片内…

无人机检测车辆——多目标检测

目录 YOLOv3(You Only Look Once version 3)简介 YOLOv3 的主要特点 YOLOv3 的结构 1. 特征提取网络(Backbone) 2. 检测头(Head) 3. 输出层 YOLOv3 损失函数 YOLOv3 的优势 YOLOv3 的应用 YOLOv3…

Scrapy并发请求深度解析:如何高效控制爬虫速度

标题:Scrapy并发请求深度解析:如何高效控制爬虫速度 引言 在Python的Scrapy框架中,合理设置并发请求数量是提高爬虫效率和遵守网站爬取规则的关键。本文将详细解释如何在Scrapy中设置并发请求的数量,并提供代码示例,…

鸿蒙进阶篇-定时器、递归

“在科技的浪潮中,鸿蒙操作系统宛如一颗璀璨的新星,引领着创新的方向。作为鸿蒙开天组,今天我们将一同踏上鸿蒙基础的探索之旅,为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…

6. Keepalived配置Nginx自动重启,实现7x24提供服务

一. Keepalived配置Nginx自动重启,实现7x24提供服务 1.编写不停的检查nginx服务器状态,停止并重启,重启失败后则停止keepalived脚本 cd /etc/keepalived/ vim check_nginx_alive_or_not.sh #---内容如下:--------------- #!/bin/bash A=`ps -C nginx --no-header |wc -l

Grafana Username password invalid

Grafana 长时间没有登陆忘记了密码,可以使用一下方法把admin密码重置为admin grafana-cli admin reset-admin-password admin 成功后如图显示

高级 SQL 技巧:提升数据查询与管理效率

在现代数据驱动的世界中,掌握 SQL(结构化查询语言)已成为每个数据专业人士的必备技能。虽然许多人都能编写基本的 SQL 查询,但在实际工作中,运用一些高级 SQL 技巧将极大提升数据查询与管理的效率。本文将分享几个实用…

理解消息队列中几个核心概念

消息队列(MQ)的核心概念详解 消息队列(MQ)是一种在分布式系统中用来实现异步通信的关键组件,广泛用于解耦、削峰填谷、异步处理等场景。在实现消息传递的过程中,消息队列包含了许多核心概念,例如 Topic、Tag、Broker 等。本文将详细讲解这些概念及其作用。 1. Topic(主…