当前位置: 首页 > 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…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制&#xff0…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色&#xf…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...