当前位置: 首页 > news >正文

搞定前端面试题——ES6同步与异步机制、async/await的使用以及Promise的使用!!!

文章目录

    • 同步和异步
    • 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

相关文章:

搞定前端面试题——ES6同步与异步机制、async/await的使用以及Promise的使用!!!

文章目录 同步和异步async/awaitPromisePromise的概念 同步和异步 ​ 同步:代码按照编写顺序逐行执行,后续的代码必须等待当前正在执行的代码完成之后才能执行,当遇到耗时的操作(如网络请求等)时,主线程会…...

Redis数据结构--跳跃表 Skip List

跳跃表(Skip List)是一种高效的随机化数据结构,通过引入多层索引来实现快速的查找、插入和删除操作。它在Redis中被用来实现有序集合(Sorted Set),在处理大量数据时表现出了优越的性能和灵活性。本文将详细…...

线状激光模组定制厂家哪家好?具体怎么收费?

在激光技术领域,线状激光模组因其高精度、高效率的特点,被广泛应用于工业制造、科研实验及医疗设备等多个领域。然而,市场上的线状激光模组种类繁多,品质参差不齐。然后如何选择线状激光模组定制厂家,以及了解其具体收…...

【Python游戏】编程开发贪吃蛇游戏(第一期)

本文收录于 《一起学Python趣味编程》专栏,从零基础开始,分享一些Python编程知识,欢迎关注,谢谢! 文章目录 一、前言二、贪吃蛇游戏开发简介2.1 贪吃蛇游戏规则2.2 贪吃蛇游戏开发步骤 三、贪吃蛇游戏开发实战四、总结…...

【机器学习入门】拥抱人工智能,从机器学习开始

拥抱人工智能,从机器学习开始 目录: 1. 机器学习:一种实现人工智能的方法 2. 机器学习算法:是使计算机具有智能的关键 3. Anaconda:初学Python、入门机器学习的首选 4. 总结 转载链接: 文章-阿里云开发者社…...

【React打卡学习第一天】

React入门 一、简介二、基本使用1.引入相关js库2.babel.js的作用 二、创建虚拟DOM三、JSX(JavaScript XML)1.本质2.作用3.基本语法规则定义虚拟DOM时,不要写引号。标签中混入JS表达式时要用{}。样式的类名指定不要用class,要用className.内联…...

matlab PID tuner整定工具箱的用法

从主页的APP中搜索到它: 按照下图IMPORT导入被控对象的传递函数 在下图的Inspect按钮中可以看到导入的被控对象的传函。 在下图的Type中选择控制器类型: 在下图的Form中选择PID的形式:有两种可选:平行式Parallel和标准式Standard …...

富格林:可信办法阻挠虚假受骗

富格林悉知,在现货黄金中,投资者一定要谦虚谨慎切记不要骄傲自大,否则就可能遭遇投资虚假受骗。在盈利后一定要持续学习可信技巧稳固基础,失败了一定要总结错误教训这样才能阻挠虚假受骗为以后的稳定盈利打好基础。以下是富格林总…...

OPPO 2024届校招正式批笔试题-后端(C卷)

小欧的括号嵌套 题目描述 小欧想要构造一个合法的括号序列满足以下条件: 括号序列长度恰好为 2 n 2n 2n。括号序列的嵌套层数最大值为 r r r。 括号嵌套层数是指在一个字符串中,以左括号 “(” 和右括号 “)” 形成的括号对的最大嵌套深度。 输入…...

HTTP请求五类状态码详细介绍,以及部分处理思路

HTTP请求状态码分为五类: 一. 消息系列 二 成功系列 三. 重定向系列 四. 请求错误系列 五. 服务器端错误系列 302:临时转移成功,请求的内容已转移到新位置 403:禁止访问 500:服务器内部错误 401代表未授权。 以下是常见的一些状态码: 1xx&…...

Log4j的原理及应用详解(三)

本系列文章简介: 在软件开发的广阔领域中,日志记录是一项至关重要的活动。它不仅帮助开发者追踪程序的执行流程,还在问题排查、性能监控以及用户行为分析等方面发挥着不可替代的作用。随着软件系统的日益复杂,对日志管理的需求也日益增长,因此,一个高效、灵活且易于使用的…...

【深度学习】PyTorch框架(4):初始网络、残差网络 和密集连接网络

1、引言 在本篇文章中,我们将深入探讨并实现一些现代卷积神经网络(CNN)架构的变体。近年来,学界提出了众多新颖的网络架构。其中一些最具影响力,并且至今仍然具有重要地位的架构包括:GoogleNet/Inception架…...

【关于PHP性能优化,内存优化,日志工具等问题处理】

目录 PHP 性能优化: 如何优化 PHP 代码以提高性能? 通用优化策略: 框架特定优化: 性能优化最佳实践: 描述一下你使用过的 PHP 性能分析工具。 检测内存泄漏的方法 使用工具检测内存泄漏 常见内存泄漏场景及解决…...

R-CNN、Fast R-CNN和Faster R-CNN:目标检测的进化之路

在计算机视觉的世界里,目标检测是一个重要的任务,它的目标是找到图像中的特定物体,并标注出它们的位置。这项技术广泛应用于自动驾驶、安防监控等领域。为了让计算机能够准确高效地完成这一任务,科学家们提出了许多优秀的算法,其中最具代表性的就是R-CNN、Fast R-CNN和Fas…...

Yolov8网络结构学习

详解YOLOv8网络结构/环境搭建/数据集获取/训练/推理/验证/导出/部署 深入解析YOLOv8:网络结构与推理过程 YOLO? You Know! --YOLOV8详解 一:yolov8总体结构 1.Backbone:它采用了一系列卷积和 反卷积层只来提取特征,同时也使用了残差连接和…...

5.5 软件工程-系统测试

系统测试 - 意义和目的 系统测试 - 原则 系统测试 - 测试过程 系统测试 - 测试策略 系统测试 - 测试方法 真题 系统测试 - 测试用例设计 黑盒测试 白盒测试 真题 系统测试 - 调试 系统测试 - 软件度量 真题...

网络故障处理及分析工具:Wireshark和Tcpdump集成

Wireshark 是一款免费的开源数据包嗅探器和网络协议分析器,已成为网络故障排除、分析和安全(双向)中不可或缺的工具。 本文深入探讨了充分利用 Wireshark 的功能、用途和实用技巧。 无论您是开发人员、安全专家,还是只是对网络操…...

UDP客户端、服务端及简易聊天室实现 —— Java

UDP 协议(用户数据包协议) UDP 是无连接通信协议,即在数据传输时,数据的发送端和接收端不建立逻辑连接,简单来说,当客户端向接收端发送数据时,客户端不会确认接收端是否存在,就会发出…...

下载安装nodejs npm jarn笔记

下载安装nodejs npm jarn笔记 下载 Node.js安装Node.js修改node全局路径安装yarn 下载 Node.js 下载Node.js 安装Node.js 双击下载的下来的.msi文件运行并安装一直点next。安装路径可以是默认也可自定义。安装完成后Node.js和npm就安装完成了 命令行输入: nod…...

Calibration相机内参数标定

1.环境依赖 本算法采用张正友相机标定法进行实现,内部对其进行了封装。 环境依赖为 ubuntu20.04 opencv4.2.0 yaml-cpp yaml-cpp安装方式: (1)git clone https://github.com/jbeder/yaml-cpp.git #将yaml-cpp下载至本地 &a…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异&#xff…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...

【HTTP三个基础问题】

面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 ​…...