搞定ES6同步与异步机制、async/await的使用以及Promise的使用!

news2024/12/22 19:32:45

文章目录

    • 同步和异步
    • async/await
    • Promise
            • Promise的概念

同步和异步

同步:代码按照编写顺序逐行执行,后续的代码必须等待当前正在执行的代码完成之后才能执行,当遇到耗时的操作(如网络请求等)时,主线程会被阻塞,直到该操作完成。

异步:当遇到耗时的操作发生时,主线程不会被阻塞,主线程会继续执行后续的代码,而非等待耗时操作完成。

async/await

​ async/await使用同步的方式编写异步代码,避免回调地狱。优势在于处理多个异步操作的情况下,可以使代码更简洁易读。

回调地狱是指过度使用嵌套的回调函数,导致代码难以阅读和维护。

async:当一个函数被标记为async后,该函数会返回一个Promise对象

await

  1. 只能在async函数内部使用。
  2. 加上await关键字之后,会执行到这一行时暂停函数的剩余部分,等待网络请求完成,然后继续执行并获取到请求返回的数据。
    在这里插入图片描述

Promise

​ Promise表示承诺在未来的某个时刻可能会完成并返回结果。
​ 对干某些需要时间来处理结果的操作,如用户登录、读取文件等,可以使用Promise对象来执行异步操作。
​ Promise对象有三种状态pending(待处理)fulfilled(已履行)rejected(被驳回)

  1. 当创建一个Promise对象时,它的初始状态为pending,表示异步执行还未完成。
  2. 当异步执行成功时,会调用resolve函数把Promise对象的状态改变为fulfilled,可通过then方法来获取异步操作的结果。
  3. 当异步执行异常时,会调用reject函数把Promise对象的状态更改为rejected,可通过catch方法来处理错误。

语法模版:

1.new关键字声明了一个Promise对象
2. 这个对象有两个参数,resolve,reject
3. 声明了一个变量用来存储Promise对象的应用
//定义Promise
声明一个变量 = new Promise((resolve,reject)=>{
  resolve("已完成方法")
  reject("未完成方法")
})
//异步操作
Promise.then(result => {
    console.log("result:",result)	//.then方法获取resolve()方法
}).catch(error => {
    console.log("error:",error)		//.catct方法获取reject()方法
}).finally(()=>{
    console.log("异步执行结束")		//异步执行之后进行调用,无论是那种结果
})

简化形式:

声明一个变量 = new Promise((resolve,reject)=>{
  resolve("已完成方法")
  reject("未完成方法")
}).then(result => {
    console.log("result:",result)
}).catch(error => {
    console.log("error:",error)
}).finally(()=>{
    console.log("异步执行结束")
})

异步操作:异步操作是指在程序执行过程中,某个操作不会立即返回结果,而是需要一段时间的等待

Promise的概念

​ 因为随着前端的业务逻辑变的越来越复杂,之前的回调函数不够用了,多层次的嵌套会导致出现回调地狱,不好维护。所以,为了解决回调地域的问题,这个时候就使用了Promise进行优化。

​ Promise也是目前前端解决异步操作多次嵌套回调的最好办法。

Promise用法:

new Promise(()=>{
	//方法体1
}).then(()=>{//方法体2})

题目一:宏任务与微任务调用步骤

image-20240713122520810

答案:1243

解析:宏任务就是构造函数,所以const离开执行,Promise.then是微任务,属于异步操作,所以先执行console.log(4)然后再回来执行.then

题目二:构造函数只执行一次

image-20240713122814037

答案:122

解析:构造函数只执行一次,但是resolve取决于调用了多次.then(then和resolve是绑定的)。

题目三:两秒之内输出一个“1”

image-20240713123025828

答案:image-20240713123257392

解析:看到最下面有.then方法,提示使用Promise

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

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

相关文章

王牌站士Ⅶ--理解大型语言模型LLM的参数

模型的大小并不一定决定其成功 在学习任何大型语言模型 (LLM) 时,您首先会听到的事情之一就是给定模型有多少个参数。如果您查看下面的图表,您会注意到参数大小范围很广 - 一个模型可能有 10 亿或 20 亿个参数,也可能有超过 1.75 万亿个参数。…

ATC 2024 | 快手开源大模型长序列训练加速技术,性能大幅超越 SOTA 方案

导读 在深度学习领域,训练大型语言模型(LLMs)一直是一项极具挑战性的任务,它不仅需要巨大的计算资源,同时对内存的消耗也非常巨大。近期,快手大模型团队提出了创新的方法,包括感知流水并行的激…

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(二)-支持高分辨率视频直播应用

引言 本文是3GPP TR 22.829 V17.1.0技术报告,专注于无人机(UAV)在3GPP系统中的增强支持。文章提出了多个无人机应用场景,分析了相应的能力要求,并建议了新的服务级别要求和关键性能指标(KPIs)。…

TS真的比JS更好吗?

前言 在讨论TypeScript(TS)是否比JavaScript(JS)更好时,我们需要明确“更好”这一概念的上下文和衡量标准。TypeScript和JavaScript在多个方面有着明显的区别,但它们并不是简单的“好”与“不好”的关系&a…

springboot上传图片

前端的name的值必须要和后端的MultipartFile 形参名一致 存储本地

一文搞定:Syncthing多平台文件同步工具安装全攻略

Syncthing是一款开源的文件同步工具,可以通过本地网络或互联网实现多台设备之间的文件同步。与其他同步工具不同,Syncthing强调隐私和安全,确保用户的数据始终处于用户的控制之下。 功能与特点 开源软件: Syncthing是完全开源的&…

base SAS programming学习笔记11(functions)

1.SAS function 分类&#xff1a; 计算描述统计量的函数&#xff1a; 举例如下&#xff1a;avgscoremean(exam1,exam2,exam3) 2.function 基本格式 function-name(argument1,argument2,......<argumentn>&#xff09; argument可以如下&#xff1a;变量名&#xff1b;常…

新手小白的pytorch学习第三弹-------tensor的基本操作

reshape, view, stacking, squeeze(), unsqueeze(),permute()torch.tensor 和 numpy 的 array切片&#xff0c;张量里面获取元素值随机种子 1 导入torch import torch2 reshape() tensor_A torch.arange(1, 11) tensor_Atensor_A.reshape(2, 5) tensor_A.reshape(2, 5)tenso…

C语言 ——— 实用调试技巧(Visual Studio)

目录 Debug 和 Release 的区别 F10 --- 逐过程调试 & F11 --- 逐语句调试 F9 --- 新建/切换断点 & F5 --- 开始调试 shift F5 & ctrl F5 Debug 和 Release 的区别 Debug&#xff1a;通常为调试版本&#xff0c;它包含调试信息&#xff0c;并且不作任何优化…

Unity ColorSpace 之 【颜色空间】相关说明,以及【Linear】颜色校正 【Gamma】的简单整理

Unity ColorSpace 之 【颜色空间】相关说明&#xff0c;以及【Linear】颜色校正 【Gamma】的简单整理 目录 Unity ColorSpace 之 【颜色空间】相关说明&#xff0c;以及【Linear】颜色校正 【Gamma】的简单整理 一、简单介绍 二、在Unity中设置颜色空间 三、Unity中的Gamma…

Vortex GPGPU的硬件代码分析(Cache篇2)

文章目录 前言一、VX_cache.sv代码部分解读2——buffering/initialize1.1 core response buffering与VX_elastic_buffer模块解读1.1.1 VX_pipe_buffer模块解读1.1.1.1 一种握手信号的解释1.1.1.2 世界线收束——VX_pipe_buffer的核心代码解释1.1.1.3 VX_pipe_register模块解读与…

算法015:串联所有单词的子串

串联所有单词的子串. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/substring-with-concatenation-of-all-words/ 如果是第一次接触这个题目&#xff0c;接触滑动…

埋点系统如何统计用户的平均停留时长?

Hello&#xff0c;大家好&#xff0c;欢迎使用Webfunny前端监控和埋点系统。 今天&#xff0c;我们将介绍webfunny的埋点系统如何统计用户的平均停留时长 一、页面beforeLeave事件 当你页面离开的时候&#xff0c;会触发一个心跳检测&#xff0c;但是这个可能不是100%触发&am…

跳表的简单学习

跳表&#xff08;SkipList&#xff09;学习 1. 什么是跳表&#xff1f; 基于“空间换时间”思想&#xff0c;通过给链表建立索引&#xff0c;使得链表能够实现二分查找。 跳表是可以实现二分查找的有序链表。 2. 从单链表到跳表 对于一般的单链表&#xff0c;在其中进行查…

EasyCVR视频技术:城市电力抢险的“千里眼”,助力抢险可视化

随着城市化进程的加速和电力需求的不断增长&#xff0c;电力系统的稳定运行对于城市的正常运转至关重要。然而&#xff0c;自然灾害、设备故障等因素常常导致电力中断&#xff0c;给城市居民的生活和企业的生产带来严重影响。在这种情况下&#xff0c;快速、高效的电力抢险工作…

【PVE】新增2.5G网卡作为主网卡暨iperf测速流程

【PVE】新增2.5G网卡作为主网卡暨iperf测速流程 新增网卡 新增网卡的首先当然需要关闭PVE母机&#xff0c;把新网卡插上&#xff0c;我用淘宝遥现金搞了个红包&#xff0c;花了26元买了块SSU的2.5G网卡。说实话这个价位连散热片都没有&#xff0c;确实挺丐的。稍后测下速度看…

从零开始做题:segmentFlow

题目 解题 import string import binascii def Crack_4B(crc_list):print(-------------Start Crack CRC 4B-------------)#crc_list [0xc0a3a573, 0x3cb6ab1c, 0x85bb0ad4, 0xf4fde00b]#文件的CRC32值列表&#xff0c;注意顺序comment chars string.printableflag 0 for …

文心一言的流式接口数据进行处理 增加属性

需求&#xff1a;需要对文心一言的流式接口数据进行处理 增加属性 return ResponseEntity.ok().header("Access-Control-Allow-Origin", "*").contentType(org.springframework.http.MediaType.TEXT_EVENT_STREAM).cacheControl(org.springframework.http…

Leetcode3201. 找出有效子序列的最大长度 I

Every day a Leetcode 题目来源&#xff1a;3201. 找出有效子序列的最大长度 I 解法1&#xff1a;枚举 全奇数、全偶数、奇偶交替三种情况的最大值即为所求。 代码&#xff1a; /** lc appleetcode.cn id3201 langcpp** [3201] 找出有效子序列的最大长度 I*/// lc codesta…

imx6ull/linux应用编程学习(16)emqx ,mqtt创建连接mqtt.fx

在很多项目中都需要自己的私人服务器&#xff0c;以保证数据的隐私性&#xff0c;这里我用的是emqx。 1.进入emqx官网 EMQX&#xff1a;用于物联网、车联网和工业物联网的企业级 MQTT 平台 点击试用cloud 申请成功后可得&#xff1a;&#xff08;右边的忽略&#xff09; 进入…