#Js篇:async函数await 命令

async函数

定义

是 Generator 函数的语法糖。

Generator 函数的引入为 JavaScript 中异步编程提供了一种更为直观和易于理解的方式

返回

async函数的返回值是Promise对象,

基本用法

使用 async 关键字声明的函数会自动返回一个 Promise 对象,无需手动创建。这使得异步函数更容易与其他异步操作协同工作。

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。

当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

async函数内部return语句返回的值,会成为then方法回调函数的参数。

上面代码中,函数f内部return命令返回的值,会被then方法回调函数接收到

async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

await命令

定义

正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。

错误处理

如果await后面的异步操作出错,那么等同于async函数返回的Promise对象被reject。

防止出错的方法,也是将其放在try...catch代码块之中

如果有多个await命令,可以统一放在try...catch结构中。

async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}
使用注意点

第一点,前面已经说过,await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。

第二点,多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。

上面代码中,getFoogetBar是两个独立的异步操作(即互不依赖),被写成继发关系。这样比较耗时,因为只有getFoo完成以后,才会执行getBar,完全可以让它们同时触发。

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

上面两种写法,getFoogetBar都是同时触发,这样就会缩短程序的执行时间。

第三点,await命令只能用在async函数之中,如果用在普通函数,就会报错。

async 函数与 Promise的区别

  1. 返回值类型:
    • async 函数总是返回一个 Promise 对象。即使在函数内部使用 return 返回非 Promise 类型的值,它也会被隐式地包装成一个解决的 Promise 对象。
    • 普通函数返回的是函数执行的结果,而 async 函数返回的是一个 Promise 对象。
  2. 语法简洁性:
    • async 函数的语法更为简洁,可以使用 await 关键字来等待异步操作的完成,而不需要手动创建 Promise 链。
    • Promise 需要通过 .then().catch() 来处理异步操作的结果,导致可能出现较深的嵌套(回调地狱)。
  3. 错误处理:
    • async 函数内部可以使用 try...catch 来捕获和处理异步操作的错误,使得错误处理更加方便。
    • Promise 中,错误处理通常通过 .catch() 方法,或者在 .then() 中的第二个参数进行。
  4. 使用场景:
    • async 函数适用于更直观地编写异步代码,特别是在处理多个异步操作时。
    • Promise 通常用于处理单一的异步操作,或者在不使用 async/await 语法的情况下进行异步编程。
  5. await 的使用:
    • await 只能在 async 函数内部使用,用于等待一个 Promise 对象解决,并返回其解决值。
    • 在普通函数或全局作用域中,无法使用 await 关键字。
  6. 可读性:
    • 使用 async/await 语法可以使异步代码更加直观和可读,避免了回调地狱,提高了代码的可维护性。
    • Promise 链的可读性较差,尤其是在处理多个异步操作时。

综合来说,async/await 是一种更现代、更清晰的异步编程方式,而 Promise 仍然是底层的异步处理机制,可以在某些场景下继续发挥作用。通常,使用 async/await 更容易理解和维护异步代码。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

企业海外分部,如何实现安全稳定的跨境网络互连?

如今,众多企业广泛采取数字化业务系统,如OA、ERP及CRM等,来提升其业务运营效率。同时,私有云与公有云混合架构也逐渐普及化。 具体来说,很多企业选择将研发系统部署在公司本地的私有云环境,以此确保数据安全…

pgz easyexcel如何给excel文件添加自定义属性

免费API方式 直接上传URL,自定义修改Excel 视频演示【内含接口地址】 https://www.ixigua.com/7304510132812153385 前情提示 | 功能说明 多选仅支持微软office、office365系列Excel。因为WPS宏功能需要企业版且付费生成xlsx、xlsm等文件,office和WPS均可以打开,均可以单…

BTC 复兴:Ordinals 带来创新活力,BitVM 与 BitStream 相继问世

除了备受瞩目的 ETF,今年 Bitcoin 生态迎来全新的发展活力和机遇。Ordinals 协议的横空出世,以此为基础诞生的 BRC20 协议给整个比特币生态带去了一波新的能量,迎来铭文热度高涨。而诸如 BitVM、BitStream 等新技术甫一问世,便引发…

学习分布式事务Seata看这一篇就够了,建议收藏

一、事务的特性 ACID特性 A(Atomic):原子性,构成事务的所有操作,要么都执行完成,要么全部不执行,不可能出现部分成功部分失败的情况。 C(Consistency):一致…

Python编程技巧 – Lambda函数

Python编程技巧 – Lambda函数 Python Programming Skills – Lambda Functions By JacksonML 2023-11-25 在前文介绍过Python函数,一个函数用def关键字声明,不带或带有参数,并以冒号结束;函数块根据结果由解释器确定返回值动态…

计数问题+约瑟夫问题(map)

目录 一、计数问题 二、约瑟夫问题 一、计数问题 #include<iostream> #include<map> using namespace std; int main() {int n,x;cin>>n>>x;map<int,int>m;for(int i1;i<n;i){if(i>1 && i<10){m[i];}else{int temp i;while (…

MYSQL基础知识之【添加数据,查询数据】

文章目录 前言MySQL 插入数据通过命令提示窗口插入数据使用PHP脚本插入数据 MySQL 查询数据通过命令提示符获取数据使用PHP脚本来获取数据内存释放 后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博…

【Jenkins】jenkins发送邮件报错:Not sent to the following valid addresses:

jenkins报错未能发送邮件到指定邮箱 注意&#xff1a;这是在系统配置中修改 在系统配置》邮件通知中添加配置信息 注意&#xff1a;这个是在项目的配置下修改 配置完成后&#xff0c;重新执行发送邮件成功&#xff01;&#xff01;&#xff01;

Python实现一箭穿心

文章目录 &#x1f384;效果&#x1f3f3;️‍&#x1f308;Turtle模块&#x1f339;代码&#x1f33a;代码讲解 &#x1f384;效果 &#x1f3f3;️‍&#x1f308;Turtle模块 Turtle是一个绘图工具&#xff0c;是Python标准库中的一个模块。它提供了一种简单而直观的方式来创…

在JVM中 判定哪些对象是垃圾?

目录 垃圾的条件 1、引用计数法 2、可达性分析 3、强引用 4、软引用 5、弱引用 6、虚引用 判断垃圾的条件 在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;垃圾收集器负责管理内存&#xff0c;其中的垃圾收集算法用于确定哪些对象是垃圾&#xff0c;可以被回收…

Linux的基本指令(二)

目录 前言 学前补充 touch指令 mkdir指令 rmdir指令 rm指令 通配符* man指令 cp指令 mv指令(重要) 补充内容&#xff1a; 1、如何快速在Linux中写出代码 2、如何看待如此多的Linux指令 cat指令 前言 关于Linux的基本指令我们会分三到四篇文章进行分析&#xff0c…

2.前端--HTML标签1【2023.11.25】

1.基本语法规范 HTML 标签是由尖括号包围的关键词&#xff0c;例如 <html>。HTML 标签通常是成对出现的&#xff0c;例如 和 &#xff0c;我们称为双标签。有些特殊的标签必须是单个标签&#xff08;极少情况&#xff09;&#xff0c;例如 <br />我们称为单标签。 …

持续增长的背后,艾比森用泛微-千里聆RPA机器人为业务加速

&#xff08;艾比森全球总部&#xff09; 艾比森集团始创于2001年&#xff0c;是全球知名的至真LED显示应用与服务提供商。目前旗下设有深圳总部&#xff0c;艾比森东江智造中心&#xff0c;以及艾比森美国、德国、日本、迪拜、俄罗斯、墨西哥、巴西、中国香港等18家海内外公司…

如何打造“面向体验”的音视频能力——对话火山引擎王悦

编者按&#xff1a;随着全行业视频化的演进&#xff0c;我们置身于一个充满创新与变革的时代。在这个数字化的浪潮中&#xff0c;视频已经不再只是传递信息的媒介&#xff0c;更是重塑了我们的交互方式和体验感知。作为字节跳动的“能力溢出”&#xff0c;火山引擎正在飞速奔跑…

openpnp - 丝杠安装调整的总结

文章目录 openpnp - 丝杠安装调整的总结概述笔记发现的问题 - X轴有回差发现的问题 - 丝杠两边的轴承座中心有高差(不同轴)备注END openpnp - 丝杠安装调整的总结 概述 设备定制回来后, 丝杠没敢动(开始是小白, 也没发现丝杠的相关问题. 因为看到同学自己安装丝杠那么痛苦, 最…

P12 C++静态关键字static

目录 01 前言 02 静态变量static 03 extern关键字 04 静态函数 最后的话 01 前言 static 关键字在 C 中有两个意思&#xff0c;这个取决于上下文。 第一种情况是在类或结构体外部使用 static 关键字&#xff0c;另一种是在类或者结构体内部使用 static。 类外面的 static…

【DP】mobiusp正在创作乐曲

输入样例1&#xff1a; 5 2 1 7 7 1 3 输出样例1&#xff1a; 2 输入样例2&#xff1a; 10 3 2 5 6 4 4 5 7 3 5 6 输出样例2&#xff1a; 1 #include<iostream> #include<cstring> #include<algorithm> #include<vector> using namespace std; typede…

jpom学习

jpom学习 整理jpom 一键安装 部署会需要 mvn跟jdk环境 # 安装服务端和 jdk、maven 环境 yum install -y wget && \ wget -O install.sh https://jpom.top/docs/install.sh && \ bash install.sh Server jdkmvndocker安装 安装docker挂载方式安装 docker …

【Docker】Docker 仓库管理和Docker Dockerfile

作者简介&#xff1a; 辭七七&#xff0c;目前大二&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

php订单发起退款(余额和微信支付)

index.html <a class="btn btn-danger btn-change btn-tuikuan btn-disabled" href="javascript:;"><i class="fa fa-tuikuan"></i> 订单退款</a>-->order.js // 为表格绑定事件Table.api.bindevent(table);//退款…