async 与 await(JavaScript)

news2024/9/24 13:14:04

目录捏

  • 前言
  • 一、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 768
	    console.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.coloradmin.cn/o/1439361.html

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

相关文章

canvas绘制横竖坐标轴(带有箭头和刻度)

查看专栏目录 canvas实例应用100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…

Redis的数据类型Hash使用场景实战

Redis的数据类型Hash使用场景 常见面试题:redis在你们项目中是怎么用的,除了String数据类型还使用什么数据类型? 怎么保证缓存和数据一致性等问题… Hash模型使用场景 知识回顾: redisTemplate.opsForHash() 方法是 Redis 的 …

基于全连接神经网络模型的手写数字识别

基于全连接神经网络模型的手写数字识别 一. 前言二. 设计目的及任务描述2.1 设计目的2.2 设计任务 三. 神经网络模型3.1 全连接神经网络模型方案3.2 全连接神经网络模型训练过程3.3 全连接神经网络模型测试 四. 程序设计 一. 前言 手写数字识别要求利用MNIST数据集里的70000张…

Multisim14.0仿真(五十五)汽车转向灯设计

一、功能描述: 左转向:左侧指示灯循环依次闪亮; 右转向:右侧指示灯循环依次闪亮; 刹车: 所有灯常亮; 正常: 所有灯熄灭。 二、主要芯片: 74LS161D 74LS04D 74…

深入理解Spark BlockManager:定义、原理与实践

深入理解Spark BlockManager:定义、原理与实践 1.定义 Spark是一个开源的大数据处理框架,其主要特点是高性能、易用性以及可扩展性。在Spark中,BlockManager是其核心组件之一,它负责管理内存和磁盘上的数据块,并确保…

通过docker-compose部署NGINX服务,并使该服务开机自启

要在通过docker-compose部署的NGINX服务实现开机自启,你需要确保Docker守护进程在系统启动时自动运行,并配置docker-compose.yml文件以在容器中运行NGINX服务。以下是步骤: 确保Docker守护进程开机启动: 在Ubuntu/Debian上&#x…

Spring IoC容器(四)容器、环境配置及附加功能

本文内容包括容器的Bean 及 Configuration 注解的使用、容器环境的配置文件及容器的附加功能(包括国际化消息、事件发布与监听)。 1 容器配置 在注解模式下,Configuration 是容器核心的注解之一,可以在其注解的类中通过Bean作用…

32USART串口

目录 一.通信接口 二.时序 三.USART简介 ​编辑四.数据帧 五.起始位侦测和采样位置对齐 &波特率计算 六.相关函数 七.编码格式设置 (1) UTF-8编码(有的软件兼容性不好)​编辑 (2)GB2312编码 八.…

【Nicn的刷题日常】之有序序列合并

1.题目描述 描述 输入两个升序排列的序列,将两个序列合并为一个有序序列并输出。 数据范围: 1≤�,�≤1000 1≤n,m≤1000 , 序列中的值满足 0≤���≤30000 0≤val≤30000 输入描述…

前端异步相关知识总结

目录 一、同步和异步简介 同步(按顺序执行) 异步(不按顺序执行) 异步出现的原因和需求 二、实现异步的方法 回调函数 Promise 生成器Generators/ yield async await 三、promise和 async await 区别 概念 两者的区别 …

07-Java桥接模式 ( Bridge Pattern )

Java桥接模式 摘要实现范例 桥接模式(Bridge Pattern)是用于把抽象化与实现化解耦,使得二者可以独立变化 桥接模式涉及到一个作为桥接的接口,使得实体类的功能独立于接口实现类,这两种类型的类可被结构化改变而互不影…

实践动物姿态估计,基于最新YOLOv8全系列【n/s/m/l/x】参数模型开发构建公共场景下行人人员姿态估计分析识别系统

姿态估计(PoseEstimation)在我们前面的相关项目中涉及到的并不多,CV数据场景下主要还是以目标检测、图像识别和分割居多,最近正好项目中在使用YOLO系列最新的模型开发项目,就想着抽时间基于YOLOv8也开发构建实现姿态估…

Open CASCADE学习|创建多段线与圆

使用Open CASCADE Technology (OCCT)库来创建和显示一些2D几何形状。 主要过程如下: 包含头文件:代码首先包含了一些必要的头文件,这些头文件提供了创建和显示几何形状所需的类和函数。 定义变量:在main函数中,定义…

如何查看端口映射?

端口映射是一种用于实现远程访问的技术。通过将外网端口与内网设备的特定端口关联起来,可以使外部网络用户能够通过互联网访问内部网络中的设备和服务。在网络中使用端口映射可以解决远程连接需求,使用户能够远程访问设备或服务,无论是在同一…

JAVA生产使用登录校验模式

背景 目前我们的服务在用户登录时,会先通过登录接口进行密码校验。一旦验证成功,后端会利用UUID生成一个独特的令牌(token),并将其存储在Redis缓存中。同时,前端也会将该令牌保存在本地。在后续的接口请求…

常用对象和常用成员函数

常量对象与常量成员函数来防止修改对象,实现最低权限原则。 在Obj被定义为常量对象的情况下,下面这条语句是错误的。 错误的原因是常量对象一旦初始化后,其值就再也不能改变。因此,不能通过常量对象调用普通成员函数,因…

海外云手机的核心优势

随着5G时代的到来,云计算产业正处于高速发展的时期,为海外云手机的问世创造了一个可信任的背景。在资源有限且需求不断增加的时代,将硬件设备集中在云端,降低个人用户的硬件消耗,同时提升性能,这一点单单就…

得物自研API网关实践之路

一、业务背景 老网关使用 Spring Cloud Gateway (下称SCG)技术框架搭建,SCG基于webflux 编程范式,webflux是一种响应式编程理念,响应式编程对于提升系统吞吐率和性能有很大帮助; webflux 的底层构建在netty之上性能表…

广度优先搜索(BFS)

力扣刷题之旅:进阶篇(二) 继续我的力扣刷题之旅,我在进阶篇的第一部分中深入探索了BFS(广度优先搜索)算法,并感受到了它在图形搜索中的强大威力。现在,我进入了进阶篇的第二部分&am…

百卓Smart管理平台 uploadfile.php 文件上传漏洞复现(CVE-2024-0939)

0x01 产品简介 百卓Smart管理平台是北京百卓网络技术有限公司(以下简称百卓网络)的一款安全网关产品,是一家致力于构建下一代安全互联网的高科技企业。 0x02 漏洞概述 百卓Smart管理平台 uploadfile.php 接口存在任意文件上传漏洞。未经身份验证的攻击者可以利用此漏洞上传…