async 与 await(JavaScript)

目录捏

  • 前言
  • 一、async
  • 二、await
  • 三、使用方法
  • 总结


前言

在这里插入图片描述

async / awaitES2017(ES8) 提出的基于 Promise 解决异步的最终方案。上一篇文章介绍了 回调地狱 与 Promise(JavaScript),因为 Promise 的编程模型依然充斥着大量的 then 方法,其虽然解决了回调地狱的问题,但是在语义化及代码可读性方面依然存在缺陷,这就是 async / await 出现的原因。


一、async

  • async(异步):用来声明一个异步函数;await(async wait):用来等待异步函数执行
  • async 是一个加在函数前的修饰符,被 async 定义的函数会默认返回一个 Promise 对象 resolve 的值,因此对 async 函数可以直接使用 then 方法
   // 默认返回 Promise 对象成功值async function fun() {console.log('用户数据读取中~~');return '用户数据读取成功!!';}fun().then(val => {console.log(val)})

在这里插入图片描述

	// 根据 Promise 对象决定返回值async function fun() {console.log('用户数据读取中~~')return new Promise((resolve, reject) => {setTimeout(() => {resolve('用户数据读取成功!!')}, 3000)})}fun().then(value => {console.log(value)})console.log(1);console.log(2);console.log(3);

在这里插入图片描述

二、await

若单有 async,则和 Promise 功能相似,但配合上 await 则效果完全不同

  • await 也是一个修饰符,只能放在 async 定义的函数内
  • await 修饰的若是 Promise 对象:可获取 Promise 中返回的内容( resolvereject 的参数),并会阻塞该函数内后面的代码直到获取到返回值后语句才会往下执行;若不是 Promise 对象:将此非 Promise 的语句当做 await 表达式的结果
	 // 非 Promise 对象async function fun() {console.log('用户数据读取中~~');let a = await '用户数据读取成功!!';console.log(a);}fun()

在这里插入图片描述

	async function fun() {console.log('用户数据读取中~~')console.log(1);console.log(2);console.log(3);// Promise 对象let a = await new Promise((resolve, reject) => {setTimeout(() => {resolve('用户数据读取成功!!')}, 3000)})console.log(a);}fun()

在这里插入图片描述

	async function fun() {let a = await 768console.log(a)let b = await '用户数据读取中...'console.log(b)// 注意:此处等待对象为函数,故需通过()调用let c = await function () {return '预计时间:3s'}()console.log(c)let d = await new Promise((resolve, reject) => {setTimeout(function () {resolve('用户数据读取成功!!')}, 3000)})console.log(d)}fun()

在这里插入图片描述

由以上案例可知 await 不仅可以用于等 Promise 对象,还可以等任意表达式,即 await 后面实际是可以接普通函数调用或者直接量的。不过我们更多的是放一个返回 Promise 对象的表达式,它等待的是 Promise 对象执行完毕所返回的结果。

	 // 非 Promise 对象function notPromise(time) {setTimeout(() => {console.log(time);return 1;}, time)}async function fun() {// 将 notPromise 所执行语句当做 await 表达式的结果let a = await notPromise(3000);let b = notPromise(2000);let c = await notPromise(1000);console.log(a);console.log('先执行我捏~')}fun();

在这里插入图片描述

三、使用方法

	// 定义一个异步函数,time秒后才能获取到值function fun(time) {// Promise 对象return new Promise((resolve, reject) => {setTimeout(() => {resolve('用户数据读取成功!!')}, time)})}async function test() {console.log(1);console.log(2);console.log(3);// 获取到 Promise 对象所返回的结果( resolve参数 )let a = await fun(3000);console.log(a)}test()

在这里插入图片描述

上一篇文章 回调地狱 与 Promise(JavaScript)中通过 Promise 解决了回调地狱问题,但不断地调用 then 链使代码看起来十分冗余从而导致可读性变差,故本文通过 asysc 与 await 来简化上文代码。

问题回顾:分别间隔 3s、2s、1s 按顺序输出:我在定时器1里捏!!我在定时器2里捏!!我在定时器3里捏!!

在这里插入图片描述

await 的优势在于简化处理 then 链,使 异步代码 的书写方式更接近于 同步代码

	function promise(value, time) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(value)}, time)})}async function fun() {let a = await promise('我在定时器1里捏!!', 3000)console.log(a);let b = await promise('我在定时器2里捏!!', 2000)console.log(b);let c = await promise('我在定时器3里捏!!', 1000)console.log(c);}fun()

在这里插入图片描述


总结

最后我们可以通过三张图片来直观对比一下三种写法:

1.回调地狱

在这里插入图片描述

2.Promise

在这里插入图片描述

3.async + await

在这里插入图片描述

注意

  • await 必须写在 async 函数中, 但 async 函数中可以没有 await
  • 在使用 await 的时候我们只是暂停了函数,而非整段代码

async/awaitPromise 并不存在谁代替谁的说法,因为 async/await 是寄生于 Promise、Generater 的语法糖。使用 async/await 可以实现用同步代码的风格来编写异步代码,而异步编程的最高境界就是不关心它是否是异步,async/await 很好的解决了这一点。

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

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

相关文章

【芯片设计- RTL 数字逻辑设计入门 11.1 -- 状态机实现 移位运算与乘法 1】

文章目录 移位运算与乘法状态机简介SystemVerilog中的测试平台VCS 波形仿真 阻塞赋值和非阻塞赋值有限状态机(FSM)与无限状态机的区别 本篇文章接着上篇文章【芯片设计- RTL 数字逻辑设计入门 11 – 移位运算与乘法】 继续介绍,这里使用状态机…

MyBatis之动态代理实现增删改查以及MyBatis-config.xml中读取DB信息文件和SQL中JavaBean别名配置

MyBatis之环境搭建以及实现增删改查 前言实现步骤1. 编写MyBatis-config.xml配置文件2. 编写Mapper.xml文件(增删改查SQL文)3. 定义PeronMapper接口4. 编写测试类1. 执行步骤2. 代码实例3. 运行log 开发环境构造图总结 前言 上一篇文章,我们…

C++后端开发之Sylar学习二:配置VSCode远程连接Ubuntu开发

C后端开发之Sylar学习二:配置VSCode远程连接Ubuntu开发 没错,我不能像大佬那样直接在Ubuntu上面用Vim手搓代码,只能在本地配置一下VSCode远程连接Ubuntu进行开发咯! 本篇主要是讲解了VSCode如何配置ssh连接Ubuntu,还有…

Oracle笔记-为表空间新增磁盘(ORA-01691)

如下报错: 原因是Oracle表空间满了,最好是新增一个存储盘。 #查XXX命名空间目前占用了多大的空间 select FILE_NAME,BYTES/1024/1024 from dba_data_files where tablespace_name XXXX #这里的FILE_NAME能查到DBF的存储位置#将对应的datafile设置为30g…

#免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程

Mac电脑苹果芯片读写NTFS硬盘bash脚本 (ntfs.sh脚本内容在本文最后面) ntfs.sh脚本可以将Mac系统(苹果M系芯片)上的NTFS硬盘改成可读写的挂载方式,从而可以直接往NTFS硬盘写入数据。此脚本免费,使用过程中无需下载任何收费软件。…

vue教程-介绍与使用

vue介绍 介绍 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 安装 最简单的例子就是,创建一个htm…

云上未来:探索云计算的技术变革与应用趋势

一、云计算的起源和演进 1.1 早期计算模型 在探讨云计算的起源和演进之前,理解早期的计算模型对于构建全面的视角至关重要。早期计算模型的发展奠定了云计算的基础,为其演进提供了技术和理念的支撑。 1.1.1 集中式计算模型 在计算技术的早期阶段&…

JVM Java虚拟机入门指南

文章目录 为什么学习JVMJVM的执行流程JVM的组成部分类加载运行时数据区本地方法接口执行引擎 垃圾回收什么样的对象是垃圾呢内存溢出和内存泄漏定位垃圾的方法对象的finalization机制垃圾回收算法分代回收垃圾回收器 JVM调优参数JVM调优工具Java内存泄漏排查思路CPU飙高排查方案…

私有化部署一个吃豆人小游戏

目录 效果 安装步骤 1.安装并启动httpd 2.下载代码 3.启动httpd 使用 效果 安装步骤 1.安装并启动httpd yum -y install httpd 2.下载代码 进入目录 cd /var/www/html/ 下载 git clone https://gitee.com/WangZhe168_admin/pacman-canvas.git 3.启动httpd syste…

c++阶梯之类与对象(中)< 续集 >

前文: c阶梯之类与对象(上)-CSDN博客 c阶梯之类与对象(中)-CSDN博客 前言: 在上文中,我们学习了类的六个默认成员函数之构造,析构与拷贝构造函数,接下来我们来看看剩下…

常用的EasyExcel表格处理-2(动态合并、自适应宽高)

EasyExcel官网:点击查看 1、动态合并单元格 此处主要根据自定义处理类ExcelFillCellMergeStrategy进行处理,具体内容可看代码注释。 1.1 前端调用controller PostMapping("/download/template")public void toDoExport(HttpServletResponse…

c#string方法对比

字符串的截取匹配操作在开发中非常常见,比如下面这个示例:我要匹配查找出来字符串数组中以“abc”开头的字符串并打印,我下面分别用了两种方式实现,代码如下: using System; namespace ConsoleApp23{ class Progra…

Android开发 button 按钮点击两次 响应onclick方法

问题 Android开发 button 按钮点击两次 响应onclick方法 详细问题 笔者xml代码 <!-- 一个按钮 --> <Button android:id"id/button1" android:layout_width"wrap_conten…

Rust 第一个rust程序Hello Rust️

文章目录 前言一、vscode 安装rust相关插件二、Cargo New三、vscode调试rustLLDB 前言 Rust学习系列。今天就让我们掌握第一个rust程序。Hello Rust &#x1f980;️。 在上一篇文章我们在macOS成功安装了rust。 一、vscode 安装rust相关插件 以下是一些常用的 Rust 开发插件…

相机图像质量研究(4)常见问题总结:光学结构对成像的影响--焦距

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

《Git 简易速速上手小册》第1章:Git 基础(2024 最新版)

文章目录 1.1 Git 简介&#xff1a;版本控制的演变1.1.1 基础知识讲解1.1.2 重点案例&#xff1a;协作开发流程优化案例&#xff1a;功能开发与分支策略 1.1.3 拓展案例 1&#xff1a;代码审查与合并1.1.4 拓展案例 2&#xff1a;冲突解决 1.2 安装和配置 Git&#xff1a;首次设…

Linux大集合

Linux Linux是什么&#xff1f; Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个基于POSIX和UNIX的多用户、多任务、 支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和 64位硬件。 Linux内核 是一个Linux系统…

51单片机之数码管显示表白数字篇

朝菌不知晦朔 蟪蛄不知春秋 眼界决定境界 CSDN 请求进入专栏 是否进入《51单片机专栏》? 确定 目录 数码管的简介 数码管引脚定义 数码管的原理图 74HC245 代码实现 静态数码管的显示 动态数码管的显示 数码管实现表白画面 数码管的简介 L…

力扣面试题 05.06. 整数转换(位运算)

Problem: 面试题 05.06. 整数转换 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.通过将两个数进行异或操作求出两个数中不同的位(不同的位异或后为二进制1); 2.统计异或后不同的位的个数(即异或后二进制为1的个数) 复杂度 时间复杂度: O ( 1 ) O(1) O(1) 空间…

挑战杯 python+深度学习+opencv实现植物识别算法系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的植物识别算法研究与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;4分 &#x1f9ff; 更多…