前端JavaScript篇之对async/await 的理解、async/await的优势、async/await对比Promise的优势

目录

  • 对async/await 的理解
  • async/await的优势
  • async/await对比Promise的优势


对async/await 的理解

async/await 是 ES2017 中引入的新特性,它是一种基于 Promise 的异步编程模式,可以让我们更方便地处理异步操作,避免回调地狱,使代码更加简洁易读。。async/await 是基于 Promise 的异步编程语法糖,它是为了解决 Promise 嵌套和回调地狱问题而设计的,可以让异步代码看起来像同步代码一样,易于理解和维护。下面我来详细解释一下 async/await 的实现机制和使用方式。

async/await 是基于 Promise 的异步编程语法糖,它的本质是将异步操作转换成同步操作,使代码看起来像同步代码一样,易于理解和维护。async/await 的关键字分别是 asyncawait,它们的作用分别是:

  • async:修饰一个函数,表示该函数是一个异步函数,它内部的异步操作会返回一个 Promise 对象。
  • await:等待一个 Promise 对象的状态变为 resolved 或 rejected,并将其结果返回。await 关键字只能在异步函数内部使用,它会暂停异步函数的执行,等待 Promise 对象的状态变化,然后根据 Promise 对象的状态执行相应的操作。
async function getUserInfo(userId) {try {const userInfo = await getUserInfoFromApi(userId)const userOrders = await getUserOrdersFromApi(userId)const result = {userInfo,userOrders}return result} catch (error) {console.error(error)}
}

在上面的代码中,我们定义了一个异步函数 getUserInfo(),它接受一个用户 ID 作为参数,并返回一个包含用户信息和订单信息的对象。在函数内部,我们使用 await 关键字等待两个异步操作 getUserInfoFromApi()getUserOrdersFromApi() 的结果,并将它们合并为一个对象。如果任何一个异步操作出现错误,则会通过 catch() 方法捕获并输出错误信息。

需要注意的是,使用 async/await 时需要避免出现死循环和阻塞主线程的问题,以免影响程序的性能和稳定性。同时,由于 async/await 是基于 Promise 的异步编程语法糖,所以它并不是 Promise 的替代品,有些场景下仍然需要使用 Promise 或其他异步编程方式来处理异步操作。

async/await的优势

async/await 相比于传统的 Promise 链式调用方式,有以下几个优势:

  1. 代码结构更加清晰易懂

使用 async/await 可以让异步代码看起来像同步代码一样,更加易于理解和维护。传统的 Promise 链式调用方式会使代码结构变得非常复杂,而 async/await 可以让代码结构更加清晰易懂。

  1. 错误处理更加方便

使用 async/await 可以使用 try-catch 语句来捕获 Promise 对象的 rejected 状态,从而更加方便地处理错误。传统的 Promise 链式调用方式需要在每个 .then() 方法中添加错误处理回调函数,代码冗余度较高。

  1. 可以使用同步的方式编写异步代码

使用 async/await 可以让异步代码看起来像同步代码一样,可以使用同步的方式编写异步代码。这样可以使代码更加自然、直观,并且容易调试。

  1. 可以使用 return 语句直接返回结果

使用 async/await 可以使用 return 语句直接返回异步操作的结果,而不需要使用 Promise 对象的 resolve 方法。这样可以使代码更加简洁。

总之,async/await 可以让异步代码更加易于理解和维护,同时也可以使代码更加简洁、自然、直观。因此,它已经成为现代 JavaScript 中处理异步操作的主流方式之一。

一个在工作中常用的案例是从服务器端获取数据,然后将数据展示在前端页面上。下面是一个使用 Promise 和 async/await 分别实现的案例:

// 使用 Promise 实现从服务器端获取数据
function getData() {return new Promise((resolve, reject) => {fetch('https://jsonplaceholder.typicode.com/todos').then(response => response.json()).then(data => {resolve(data)}).catch(error => {reject(error)})})
}getData().then(data => {console.log(data)}).catch(error => {console.error(error)})

上述代码中,使用了 Promise 和 fetch 函数从服务器端获取数据,然后将数据打印到控制台上。

下面是同样的案例,使用 async/await 实现:

// 使用 async/await 实现从服务器端获取数据
async function getData() {try {const response = await fetch('https://jsonplaceholder.typicode.com/todos')const data = await response.json()console.log(data)} catch (error) {console.error(error)}
}getData()

上述代码中,使用了 async/await 和 fetch 函数从服务器端获取数据,然后将数据打印到控制台上。在代码中使用了 try…catch 块来处理可能出现的异常,代码更加简洁、直观。

async/await对比Promise的优势

  1. 更加简洁、直观:使用 async/await 可以避免 Promise 链式调用时的嵌套和回调地狱的问题,使代码更加易于阅读和维护。async/await 代码更加简洁、直观,让异步代码的写法更加接近同步代码。

  2. 更加容易处理异常:使用 async/await 可以像同步代码一样使用 try…catch 块来处理可能出现的异常,避免了 Promise 链式调用时需要在每个 then 方法中处理异常的问题。这使得代码的错误处理更加友好和直观。

  3. 更加灵活:async/await 可以像同步代码一样使用 if、for、while 等语句,使得异步代码的逻辑更加灵活。这使得异步代码的编写更加简单、直观和高效。

  4. 更加高效:async/await 可以使用 await 关键字将异步操作转换为同步操作,避免了 Promise 链式调用时多次回调的问题,使得异步代码的执行速度更加高效。

  5. 代码可读性更好:async/await 让异步代码的写法更加接近同步代码,使代码更容易理解和阅读。相比之下,Promise 的链式调用虽然摆脱了回调地狱,但是代码可读性仍然不如 async/await。

  6. 中间值传递更方便:在 Promise 中传递中间值需要通过 then 方法的参数来实现,代码比较冗长,而在 async/await 中,可以像同步代码一样使用变量传递中间值,代码更加简洁。

  7. 错误处理更友好:使用 async/await 可以像同步代码一样使用 try…catch 块来处理异常,使得代码的错误处理更加友好和直观。而在 Promise 中,需要在每个 then 方法中处理异常,代码比较冗长。

  8. 调试更方便:在 async/await 中,可以像同步代码一样使用调试器设置断点,方便调试代码。而在 Promise 中,由于没有代码块,调试起来比较困难。

综上所述,async/await 相比 Promise 有更好的代码可读性、中间值传递更方便、错误处理更友好、调试更方便等优势,使得异步代码的编写更加简单、直观和高效。但是需要注意的是,async/await 也有一些限制,比如不能在顶层作用域中使用,需要在 async 函数内部使用。

持续学习总结记录中,回顾一下上面的内容:
async/await是JavaScript中处理异步操作的一种语法糖。它让我们可以用同步的方式写异步代码,使得代码更易读懂。

async/await的优势:

  1. 代码更简洁:不需要嵌套的回调函数或链式调用的Promise,代码结构更清晰。
  2. 异常处理更方便:使用try-catch语法捕获和处理异常,使错误处理更容易。
  3. 控制流更直观:可以使用常规的控制流语句(如for循环、if语句)组织异步代码,逻辑更清晰易懂。

相比于Promise,async/await的优势:

  1. 更接近同步编程:更容易理解和学习,无需过多关注Promise的.then()和.catch()。
  2. 错误处理更简单:使用try-catch来捕获异常,而不是通过传递错误回调函数。
  3. 代码可读性更高:使用常规的控制流语句,代码更易读、维护和调试。
    需要注意的是,async/await本质上仍依赖于Promise,只是提供了更友好的语法糖来处理异步操作。

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

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

相关文章

利用Cloudfare worker反代github

绑定你的域名到 cloudflare 创建一个 worker,并写入如下代码: // 反代目标网站. const upstream github.com;// 反代目标网站的移动版. const upstream_mobile github.com;// 访问区域黑名单(按需设置). const blocked_region …

react 【二】 setState/react性能优化/dom操作

文章目录 1、setState1.1 setState的三种用法1.2 setState为什么是异步 2、React性能优化2.1 react的更新机制2.2 如何优化性能2.2.1 shouldComponentUpdate2.2.2 PureComponent2.2.3 memo 3、不可变数据的力量4、dom操作4.1 通过ref获取dom的三种方式4.2 执行子组件的方法&…

大模型提示学习、Prompting微调知识

为什么需要提示学习? 提示学习是一种在自然语言处理任务中引入人类编写的提示或示例来辅助模型生成更准确和有意义的输出的技术。以下是一些使用提示学习的原因: 解决模糊性:在某些任务中,输入可能存在歧义或模糊性,通…

【ES】--Elasticsearch的分词器详解

目录 一、前言二、分词器原理1、常用分词器2、ik分词器模式3、指定索引的某个字段进行分词测试3.1、采用ts_match_analyzer进行分词3.2、采用standard_analyzer进行分词三、如何调整分词器1、已存在的索引调整分词器2、特别的词语不能被拆开一、前言 最近项目需求,针对客户提…

Java多线程 继承Thread类

目录 程序 进程 线程多线程实例创建线程测试线程 程序 进程 线程 程序,进程和线程是操作系统中的基本概念,它们在多线程编程中起着重要的作用。 程序:程序是一组指令的集合,用于实现特定的功能。程序通常是静态的,在程…

【开源】基于JAVA+Vue+SpringBoot的班级考勤管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统基础支持模块2.2 班级学生教师支持模块2.3 考勤签到管理2.4 学生请假管理 三、系统设计3.1 功能设计3.1.1 系统基础支持模块3.1.2 班级学生教师档案模块3.1.3 考勤签到管理模块3.1.4 学生请假管理模块 3.2 数据库设…

Java学习笔记------ArrayList(二)

基本数据类型对应的包装类 byte------Byte、short------Short char------Character、int------Intege long------Long、float------Float double------Double、boolean------Boolean 例如: import java.util.ArrayList; public class test01{public static vo…

Arduino 开发环境

Arduino 刚开始挺简单的,买一块 UNO 或者 Nano,官网下载 IDE (在线的就算了,太慢),立即就可以开始编程了,至少让板载 LED 亮起来没问题。这也是 Arduino 亲儿子的优势,省心。 不过你…

云服务器操作系统Windows和Linux镜像有什么区别?

阿里云服务器镜像Windows和Linux操作系统有什么区别?性能有差异吗?有,同配置下Linux性能要优于Windows,但这与阿里云无关,仅仅是linux和windows之间的区别。另外,阿里云提供的windows和linux操作系统均为正…

Java中 HashSet如何判断两个对象是否相等

HashSet如何判断两个对象是否相等 HashSet 是 Java 中的一个类,它实现了 Set 接口。HashSet 中的元素是无序且唯一的,它不保证元素的顺序,也不允许出现重复元素。为了确定两个对象是否相等,HashSet 使用了以下两个方法&#xff1…

LeetCode、338. 比特位计数【简单,位运算】

文章目录 前言LeetCode、338. 比特位计数【中等,位运算】题目链接与分类思路位运算移位处理前缀思想实现 资料获取 前言 博主介绍:✌目前全网粉丝2W,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java…

Vue3快速上手(三)Composition组合式API及setup用法

一、Vue2的API风格 Vue2的API风格是Options API,也叫配置式API。一个功能的数据&#xff0c;交互&#xff0c;计算&#xff0c;监听等都是分别配置在data, methods&#xff0c;computed, watch等模块里的。如下&#xff1a; <template><div class"person"…

Leetcode 606.根据二叉树创建字符串

给你二叉树的根节点root&#xff0c;请你采用前序遍历的方式&#xff0c;将二叉树转化为一个由括号和整数组成的字符串&#xff0c;返回构造出的字符串。 空节点使用一对空括号对"root"表示&#xff0c;转化后需要省略所有不影响字符串与原始二叉树之间的一对一映射…

[ai笔记1] 借着“ai春晚”开个场

1 文思ai笔记-新的开始 今天是2024年2月29日&#xff0c;也是传统农历的除夕夜。早起在ai圈看到一个比较新奇的消息&#xff0c;ai春晚今日举办&#xff0c;竟然有一点小小的激动。这些年确实好久没看过春晚了&#xff0c;自己对于春晚的映像还停留在“白云黑土”、“今天&…

论文解读:MobileOne: An Improved One millisecond Mobile Backbone

论文创新点汇总&#xff1a;人工智能论文通用创新点(持续更新中...)-CSDN博客 论文总结 关于如何提升模型速度&#xff0c;当今学术界的研究往往聚焦于如何将FLOPs或者参数量的降低&#xff0c;而作者认为应该是减少分支数和选择高效的网络结构。 概述 MobileOne(≈MobileN…

react【五】redux/reduxToolkit/手写connext

文章目录 1、回顾纯函数2、redux2.1 redux的基本使用2.2 通过action修改store的数值2.3 订阅state的变化2.4 目录结构2.5 Redux的使用过程2.6 redux的三大原则2.7 Redux官方图 3、redux在React中的使用4、react-redux使用4.1 react-redux的基本使用4.2 异步请求 redux-thunk4.3…

课时26:内容格式化_常用符号解读_终端输出

3.1.2 终端输出 学习目标 这一节&#xff0c;我们从 后台执行、信息符号、小结 三个方面来学习。 后台执行 简介 & 就是将一个命令从前台转到后台执行,使用格式如下&#xff1a;命令 &简单演示 前台执行休眠命令 [rootlocalhost ~]# sleep 4 界面卡住4秒后消失后…

字符串大小比较的方法以及函数的多返回值

1.字符串的大小比较: 按照ASCII码表的值进行比较字符串大小 print(f"abc大于abd,结果为{abc>abd}") #结果为布尔类型False print(f"a大于A,结果为{a>A}") #True print(f"key1大于key2,结果为{key1>key2}") #False 2.函数的多返回值: …

分布式文件系统 SpringBoot+FastDFS+Vue.js

分布式文件系统 SpringBootFastDFSVue.js 一、分布式文件系统1.1.文件系统1.2.什么是分布式文件系统1.3.分布式文件系统的出现1.3.主流的分布式文件系统1.4.分布式文件服务提供商1.4.1.阿里OSS1.4.2.七牛云存储1.4.3.百度云存储 二、fastDFS2.1.fastDSF介绍2.2.为什么要使用fas…

<s-table>、<a-table>接收后端数据

对于 中的 <template #bodyCell“{ column, record }”> &#xff1a; <s-tableref"table":columns"columns":data"loadData":alert"options.alert.show"bordered:row-key"(record) > record.id":tool-config&…