Javascript——async、await详解

一、async、await是什么?

async用于申明一个function是异步的;
而await则可以认为是 async await的简写形式,是等待一个异步方法执行完成的。**async函数**
通过在函数声明前加上async关键字,可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then().catch()来处理它们的结果。

创建一个async函数

async function asyncFunction() {return "异步操作完成";
}asyncFunction().then(value => console.log(value)); // 输出:异步操作完成

await关键字只能在async函数内部使用。它可以暂停async函数的执行,等待Promise的解决(resolve),然后以Promise的值继续执行函数。
在async函数中使用await

async function asyncFunction() {let promise = new Promise((resolve, reject) => {setTimeout(() => resolve("完成"), 1000)});let result = await promise; // 等待,直到promise解决 (resolve)console.log(result); // "完成"
}
asyncFunction();

二、async/await的特点

1、Async作为关键字放在函数前面,普通函数变成了异步函数
2、异步函数async函数调用,跟普通函数调用方式一样。在一个函数前面加上async,变成 async函数,异步函数,return:1,打印返回值,
3、返回的是promise成功的对象,
4、Async函数配合await关键字使用

错误处理
在async/await中,错误处理可以通过传统的try…catch语句实现,这使得异步代码的错误处理更加直观。

代码示例:使用try...catch处理错误async function asyncFunction() {try {let response = await fetch('http://example.com');let data = await response.json();// 处理数据} catch (error) {console.log('捕获到错误:', error);}
}asyncFunction();

举个🌰
模拟出一个摇色子的异步操作,先通过一个方法三秒之后拿到一个筛子数,第二步进行输出

//基本用法的async函数
let asyncFun = async function(){return 1
}
console.log(asyncFun())
//会返回一个promise对象//使用场景
//摇色子方法
function dice(){return new Promise((resolve,reject)=>{let sino = parseInt(Math.random()*6+1)  //生成一个1~6之间的随机小数setTimeout(()=>{resolve(sino)},2000)})
}//异步方法async function text(){let n= await dice()//await 关键字后面调用摇色子方法执行完毕之后,才进行变量赋值console.log("摇出来"+n)  //最后打印出摇出来的数}
text()

三、async/await的优点

1.方便级联调用:即调用依次发生的场景;
2.同步代码编写方式:Promise使用then函数进行链式调用,一直点点点,是一种从左向右的横向写法;async/await从上到下,顺序执行,就像写同步代码一样,更符合代码编写习惯;
3.多个参数传递:Promise的then函数只能传递一个参数,虽然可以通过包装成对象来传递多个参数,但是会导致传递冗余信息,频繁的解析又重新组合参数,比较麻烦;async/await没有这个限制,可以当做普通的局部变量来处理,用let或者const定义的块级变量想怎么用就怎么用,想定义几个就定义几个,完全没有限制,也没有冗余工作;
4.同步代码和异步代码可以一起编写:使用Promise的时候最好将同步代码和异步代码放在不同的then节点中,这样结构更加清晰;async/await整个书写习惯都是同步的,不需要纠结同步和异步的区别,当然,异步过程需要包装成一个Promise对象放在await关键字后面;
5.基于协程:Promise是根据函数式编程的范式,对异步过程进行了一层封装,async/await基于协程的机制,是真正的“保存上下文,控制权切换……控制权恢复,取回上下文”这种机制,是对异步过程更精确的一种描述;
6.async/await是对Promise的优化:async/await是基于Promise的,是进一步的一种优化,不过在写代码时,Promise本身的API出现得很少,很接近同步代码的写法

四、async主要来处理异步的操作,

需求:执行第一步,将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。

举个🌰Vue项目案例

普通案例promise:

methods: {getLocation(phoneNum) {return axios.post('/one接口', {phoneNum})},    getFaceList(province, city) {return axios.post('/two接口', {province,city})},  getFaceResult () {this.getLocation(this.phoneNum).then(res => {if (res.status === 200 && res.data.success) {let province = res.data.obj.province;let city = res.data.obj.city;this.getFaceList(province, city).then(res => {if(res.status === 200 && res.data.success) {this.faceList = res.data.obj}})}}).catch(err => {console.log(err)})     }
}

async/ await案例:

首先把 getFaceResult 转化成一个async 函数,就是在其前面加async, 因为它的调用方法和普通函数的调用方法是一致,所以没有什么问题。然后就把 getLocation 和getFaceList 放到await 后面,等待执行, getFaceResult 函数修改如下:async getFaceResult () {let location = await this.getLocation(this.phoneNum);if (location.data.success) {let province = location.data.obj.province;let city = location.data.obj.city;let result = await this.getFaceList(province, city);if (result.data.success) {this.faceList = result.data.obj;}}}现在就还差一点需要说明,那就是怎么处理异常,如果请求发生异常,怎么处理? 它用的是try/catch 来捕获异常,把await 放到 try 中进行执行,如有异常,就使用catch 进行处理。
完整代码:async getFaceResult () {try {let location = await this.getLocation(this.phoneNum);if (location.data.success) {let province = location.data.obj.province;let city = location.data.obj.city;let result = await this.getFaceList(province, city);if (result.data.success) {this.faceList = result.data.obj;}}} catch(err) {console.log(err);}}

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

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

相关文章

nginx基本优化

安装nginx隐藏版本号 查看百度web服务器 [rootcjq11 ~]# curl -I http://www.baidu.com 隐藏nginx服务器版本号 [rootcjq11 ~]# cd /usr/local/src/nginx-1.22.0/ [rootcjq11 nginx-1.22.0]# vim src/core/nginx.h第13、14行修改版本号和服务器名称 [rootcjq11 nginx-1.2…

HAL库配置RS485通信

在配置好串口的基础上完成RS485的配置 一、使能RS485的发送和接收模式引脚 __HAL_RCC_GPIOG_CLK_ENABLE();//高电平是发送模式,低电平是接收模式,默认是接收模式HAL_GPIO_WritePin(PG4_RS485_DIR1_Port, PG4_RS485_DIR1_Pin, GPIO_PIN_RESET);GPIO_Init…

特征工程-特征处理(三)

特征处理 连续型变量处理(二) 多特征 降维 PCA PCA是一种常见的数据分析方式,通过数据分解,将高维数据降低为低维数据,同时最大程度保持数据中保存的信息。 from sklearn.decomposition import PCA A np.array([[84…

6、Pandas处理数据类型和缺失值

文章目录 简介数据类型缺失数据解决最常见的阻碍数据处理进展的问题 本节夸克网盘数据集链接:https://pan.quark.cn/s/07400ba46613 提取码:Z9sZ 简介 在本教程中,您将学习如何查看DataFrame或Series中的数据类型。您还将学习如何查找并替换数据。 数据类型 DataFrame或…

计算机毕业设计----SSH滑雪场场地租赁管理系统

项目介绍 该项目主要包括三个角色:管理员、收银员、用户; 用户角色包含以下功能: 用户登录,修改个人信息,查看我的订单等功能。 管理员角色包含以下功能: 管理员登录,滑雪场管理,订单管理,教练管理,器材管理,会员管理,收银员管…

【手撕C语言 第二集】初识C语言

​​ 一、变量的作用域和生命周期 作用域:一个变量在哪里可以使用它,哪里就是它的作用域。 局部变量的作用域:变量所在的局部范围 全局变量的作用域:整个工程 不管整个工程里面有多少源文件,都可以使用全局变量。这样…

WiFi7: ML建立流程

原文:ML (重)建立在non-AP MLD和AP MLD之间建立链接(link(s)),其基于(重)关联请求和(重)关联响应帧的简化完成。 NOTE-在以上流程之前,non-AP MLD和AP MLD必须进行认证流程。 原文:non-AP MLD可以发起 ML (重)建立,来建立一个或多个链接。Non-AP MLD必须发送(重)关联…

sqlilabs第五十七五十八关

Less-57(GET - challenge - Union- 14 queries allowed -Variation 4) 手工注入 Less-58(GET - challenge - Double Query- 5 queries allowed -Variation 1) 手工注入 报错注入就可以(布尔注入的话次数不够)(所以我们前面需要做够足够的数据支持) 最后…

关于 ant-design-vue resetFields 失效

关于 ant-design-vue resetFields 失效 背景: 遇到这样的问题使用ant-design-vue useForm来制作表单的时候,resetFields()失效 场景: 编辑 -赋值 新增-初始值(问题点:新增的时候他就不初始化) 方案&…

IDEA 常用快捷键(持续更新)

常用操作 快捷键描述Shift F10执行Alt /提示补全Ctrl /单行注释Ctrl Shift /多行注释Alt Enter根据光标所在问题,提供快速修复选择Alt Insert代码自动生成,如生成对象的构造函数等 查看源码 Ctrl Shifti出现类似于预览的小窗口Ctrl Enter完全…

【模板规范】会议纪要模板

文章目录 1、简介2、纪要模板2.1、表格类会议纪要2.2、文档类会议纪要2.3、简易版项目纪要 3、会议纪要3.1、作用3.2、特点3.2.1、工作会议纪要3.2.2、代表会议纪要3.2.3、座谈会议纪要3.2.4、联席会议纪要3.2.5、办公会议纪要3.2.6、汇报会议纪要3.2.7、技术鉴定会议纪要 3.3、…

C++ 之LeetCode刷题记录(十一)

😄😊😆😃😄😊😆😃 开始cpp刷题之旅。 向耗时0s前进。 67. 二进制求和 给你两个二进制字符串 a 和 b ,以二进制字符串的形式返回它们的和。 示例 1: 输入…

笙默考试管理系统-MyExamTest----codemirror(72)

笙默考试管理系统-MyExamTest----codemirror(72) 目录 一、 笙默考试管理系统-MyExamTest----codemirror 二、 笙默考试管理系统-MyExamTest----codemirror 三、 笙默考试管理系统-MyExamTest----codemirror 四、 笙默考试管理系统-MyExamTest--…

JavaScript 中生成二维码,你可以使用第三方库,其中最流行和广泛使用的是 QRCode.js。以下是使用 QRCode.js 生成二维码的基本步骤:

要在 JavaScript 中生成二维码,你可以使用第三方库,其中最流行和广泛使用的是 QRCode.js。以下是使用 QRCode.js 生成二维码的详细的步骤如下: 步骤 1: 引入 QRCode.js 库 首先,将 QRCode.js 库引入到你的 HTML 文件中。你可以从…

【高危】Apache Solr 环境变量信息泄漏漏洞

漏洞描述 Apache Solr 是一款开源的搜索引擎。 在 Apache Solr 受影响版本中,由于 Solr Metrics API 默认输出所有未单独配置保护策略的环境变量。在默认无认证或具有 metrics-read 权限的情况下,攻击者可以通过向 /solr/admin/metrics 端点发送恶意请…

从数据可视化到场景渲染:山海鲸的创新与实践

作为山海鲸的开发者,我们深知可视化模型场景渲染在数据分析和决策支持中的重要作用。因此在保证山海鲸可视化软件免费编辑、分享、部署的同时也在场景渲染方面不断优化,本文将介绍山海鲸在可视化模型场景渲染方面的技术革新与实践探索。 首先&#xff0…

C#核心--思维导图

对应《C#--核心》(http://t.csdnimg.cn/cpRbZ)

BFS(广度优先搜索)_层序遍历最短路径_总结

层序遍历 LeetCode 102. Binary Tree Level Order Traversal 二叉树的层序遍历(中等) LeetCode 103. Binary Tree Zigzag Level Order Traversal 之字形层序遍历 LeetCode 199. Binary Tree Right Side View 找每一层的最右结点 LeetCode 515. Find Larg…

3d姿态 mhformer 预测代码

目录 预测并可视化代码 调整部分代码: 可视化推理: mhformer 也是先进行人体检测,输出2d关键点,再估计3d关键点, 预测并可视化代码 需要注释掉plt.switch_backend(agg) 调整部分代码: output_dir_3D …

发现了一个比GPT-4还厉害的写论文解读的agent !

已经2024年了,该出现一个写论文解读AI Agent了。 大家肯定也在经常刷论文吧。 但真正尝试过用GPT去刷论文、写论文解读的小伙伴,一定深有体验——费劲。其他agents也没有能搞定的,今天我发现了一个超级厉害的写论文解读的agent &#xff0c…