js【详解】async await

为什么要使用 async await

async await 实现了使用同步的语法实现异步,不再需要借助回调函数,让代码更加易于理解和维护。

(async function () {// await 必须放在 async 函数中try {// 加载第一张图片const img1 = await loadImg1()// 加载第二张图片const img2 = await loadImg2()} catch (err) {console.error(err)}
})()

async await 使用要点

  • await 只能在 async 函数中使用

async await 语法特点

  • async 函数返回的都是 Promise 对象(若 async 函数内返回的不是 Promise ,则会自动将其封装为 Promise 再返回)
async function fn1() {return 100
}
console.log( fn1() ) // 相当于 Promise.resolve(100)
  • await 后跟 Promise 对象:会阻塞代码的运行,需等待 Promise 变为 resolved 状态返回结果后,才继续执行后续代码
(async function () {const p1 = new Promise(() => {}) await p1 // p1 一直是一个 pending 状态的 Promise,代码将阻塞在这里,无限等待下去,后续的代码不会执行console.log('p1') // 此句不会执行
})()
  • await 后跟非 Promise 对象:会直接返回
(async function () {const res = await 100console.log(res) // 100
})()
  • await 相当于 Promise 的 then
(async function () {const p2 = Promise.resolve(100)const res = await p2 console.log(res) // 100
})()(async function () {const res = await 100console.log(res) // 100
})()(async function () {const p3 = Promise.reject('some err')const res = await p3 // p3 为rejected 状态的 Promise , 而 await 会一直等待 resolved 状态的 Promise,所以代码将阻塞在这里,无限等待下去,后续的代码不会执行console.log(res) // 不会执行
})()
  • 使用 try…catch 捕获异常,相当于 Promise 里 catch (有利于代码的标准化,因为异常标准的捕获方式就是使用 try…catch )
(async function () {const p4 = Promise.reject("some err");try {const res = await p4;console.log('await后的Promise执行成功后的返回值res:',res);} catch (err) {console.error('await后的Promise执行失败后的报错err:',err); }
})();

在这里插入图片描述

async await 的本质

async await 只是语法糖,本质还是异步调用

  • await 之后的代码,都属于异步调用

下方代码的执行顺序,见代码注释的序号

async function async1 () {console.log('async1 start') //2await async2()console.log('async1 end') // 5 关键在这一步,它相当于放在 callback 中,最后执行
}async function async2 () {console.log('async2')  //3
}console.log('script start') // 1
async1()
console.log('script end') //4

在这里插入图片描述

async await 自测题

在这里插入图片描述
答案:a 是 Promise,b 是 100
解析:async 函数的返回值是 Promise , await 相当于 promise 的 then

在这里插入图片描述

答案: start 100 200

解析:

  • await 后接非Promise,不做处理,直接返回
  • await 相当于 promise 的 then 函数
  • resloved 状态的 promise 会触发 then 函数
  • rejected 状态的 promise 不会触发 then 函数

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

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

相关文章

P1002 [NOIP2002 普及组] 过河卒

题目 原题目链接 题目描述 棋盘上 A A A 点有一个过河卒,需要走到目标 B B B 点。卒行走的规则:可以向下、或者向右。同时在棋盘上 C C C 点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点。因此称之为“马拦过河…

比较两组二维平面结构的演化

假设1个6*6的二维平面空间,这个空间的行和列只能按照1-2-3-4-5-6-1的顺序变换。这个平面上的物体只能平移。在这个空间里有力,在这些力的作用下,两个点按照 1-7的顺序运动。 - - - - - - - - - - - - - - - A - - - - - …

序列化相关知识总结

目录 一、序列化1.1 基本概念1.1.1 序列化1.1.2 反序列化1.1.3 数据结构、对象与二进制串1.1.4 序列化/反序列化的目的 1.2 几种常见的序列化和反序列化协议1.2.1 XML&SOAP1.2.2 JSON(Javascript Object Notation)1.2.3 Protobuf 二、安卓下的序列化…

React 开发者完全指南:React.FC()、函数组件 和更多

前言 React.FC 是一个 TypeScript 类型,用于 React 函数组件。FC 代表 Functional Component(函数组件)。这个类型的使用有助于在 TypeScript 项目中编写类型安全的 React 组件。使用 React.FC 为组件定义类型就可以享受到 TypeScript 提供的…

什么是IP白名单?为什么要设置IP白名单?

在互联网的世界里,IP地址是每个设备与网络进行通信的关键标识。然而,并不是所有的IP地址都可以无限制地访问所有网络资源。为了保障网络安全和资源管理,很多网站和服务会设置IP白名单。本文将详细介绍IP白名单的定义、作用以及为什么要设置IP…

ARMv8/ARMv9架构入门到精通-学习方法

目录 1、学习ARM基础知识2、学习ARM异常(中断)3、学习MMU4、学习Cache5、学习Trustzone和安全架构6、学习ARM架构和各类IP推荐 本文转自 周贺贺,baron,代码改变世界ctw,Arm精选, 资深安全架构专家,11年手机安全/SOC底层…

SpringMVC06、数据处理

6、数据处理 6.1、处理提交数据 1、提交的域名称和处理方法的参数名一致 提交数据 : http://localhost:8080/hello?namekuangshen 处理方法 : RequestMapping("/hello") public String hello(String name){System.out.println(name);return "hello";…

Flask基于配置文件添加项目config配置

文章目录 1. 直接在app文件中添加配置2. 基于配置config文件添加配置2.1 直接在配置文件中定义2.2 调用配置文件中的类2.3 基于字典类实现多种环境配置 Flask 项目中,我们会加载很多配置,比如设置数据库连接信息,设置日志所在路径等等。配置的…

【PTA】L1-011 L1-012 L1-013 L1-014 L1-015(C)第三天

L1-011 A-B 分数 20 作者 陈越 单位 浙江大学 本题要求你计算A−B。不过麻烦的是,A和B都是字符串 —— 即从字符串A中把字符串B所包含的字符全删掉,剩下的字符组成的就是字符串A−B。 输入格式: 输入在2行中先后给出字符串A和B。两字符…

javase day02笔记

第二天课堂笔记 源文件的组成部分★★ 源文件外部结构 class 类名{}main方法 public static void main(String [] args){}main方法可有可无 没有main的情况,编译成功,运行失败,没有程序入口 多个main情况,编译报错,…

半监督 伪标签

什么是半监督学习 半监督学习也是一类更接近于人类学习方法的机器学习范式。试想这样一个场景,我们小时候学习识别小猫、小狗、汽车等等物品时,往往只需要父母进行一两次的指导,我们就能很准确地辨认出什么是猫狗。这背后有一个重要原因是&am…

抖音素材网站去哪下载?给你推荐六个抖音自媒体网站

各位抖音视频创作达人们,是否在苦苦寻觅那些能够点燃观众热情,让视频内容跃然屏上的素材宝库呢?此刻,你们的寻觅之旅将迎来终点!我将向你们隆重推荐10个精心挑选的视频素材库,它们定能让你们的抖音视频如同…

Windows下安装pip

一、下载pip 官网地址:https://pypi.org/project/pip/#files 1.1、pip工具查找方法 单击官网首页“PyPi”选项 在弹出来的搜索框中输入“pip” 选择最新的pip版本,点进去 下载pip安装包包 二、安装pip 解压“pip-24.0.tar.gz”,进…

【Linux】常用操作命令

目录 基本命令关机和重启帮助命令 用户管理命令添加用户:useradd 命令修改密码:passwd 命令查看登录用户:who 命令查看登录用户详细信息 :w切换用户 目录操作命令cdpwd命令目录查看 ls [-al] 目录操作【增,删,改&#…

java通过poi-tl生成word

我看公司之前做电子合同,使用TIBCO jaspersoft做的报表模板,如果是给自己公司开发或者给客户做项目,这个也没有什么,因为反正模板是固定的,一次性开发,不用担心后续的问题。即使后期有调整,改一…

java新特性stream流的相关操作(二)

参考资料: java新特性stream流的相关操作(一) groupingBy的综合使用: package com.example.worddemo.test.jacob;import com.alibaba.fastjson2.JSON;import java.util.Arrays; import java.util.List; import java.util.Map; i…

安全运营方案的基本框架和关键要素

一、前言 阐述安全运营方案的目的和重要性。强调安全运营与组织整体战略目标的关联。 二、安全运营原则 确立安全运营的基本原则,如保密性、完整性和可用性。明确安全责任划分,确保各部门和人员履行安全职责。 三、安全风险评估与管理 进行全面的安…

计算两帧雷达数据之间的变换矩阵

文章目录 package.xmlCMakeLists.txtpoint_cloud_registration.cc运行结果 package.xml <?xml version"1.0"?> <package format"2"><name>point_cloud_registration</name><version>0.0.0</version><descriptio…

九州金榜|孩子厌学的因素及解决办法

孩子在学习的过程中&#xff0c;遇到厌学这种情况非常容易见到&#xff0c;这也是孩子在成长的过程中经常遇到的烦恼。面对孩子的厌学&#xff0c;作为家长这时候不要慌乱&#xff0c;要做到分析孩子产生厌学的原因&#xff0c;在去寻找解决孩子厌学的办法。下面九州金榜家庭教…

【漏洞复现】大华ICC智能物联综合管理平台任意文件读取漏洞

Nx01 产品简介 大华智能物联综合管理平台 iConnection Center&#xff08;以下简称&#xff1a;ICC平台&#xff09;&#xff0c;是一套基于智能物联的综合业务管理平台软件&#xff0c;具备强大的后台服务能力&#xff0c;配套了B/S管理员端、C/S客户端、移动APP终端、小程序等…