搞定前端面试题——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

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

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

相关文章

Java二十三种设计模式-抽象工厂模式(3/23)

抽象工厂模式:复杂系统的灵活构建者 引言 在软件开发中,抽象工厂模式是一种提供接口以创建相关或依赖对象族的创建型设计模式。这种模式允许客户端使用一个共同的接口来创建不同的产品族,而无需指定具体类。 基础知识,java设计模…

算法 —— LRU算法

算法 —— LRU算法 LRULRU算法的工作原理:实现方法:性能考虑: 模拟过程splice函数对于std::list和std::forward_list基本语法:功能描述: 示例:注意事项: 如果大家已经学习过了Cache的替换算法和…

ElementUIV12相关使用方法

今日内容 零、 复习昨日 零、 复习昨日 一、Element UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 官网: https://element.eleme.cn/#/zh-CN Element Plus,基于 Vue 3,面向设计师和开发者的组件库 官网: htt…

C语言--递归

曾经有一个段子:上大学时,我们的c语言老师说:学c时,如果有50%的同学死在了循环上面,那么就有90%的同学死在了递归上面。接下来,就来看看递归是怎么个事? 一.递归的介绍 递归是指一个函数直接或…

跨平台WPF音乐商店应用程序

目录 一 简介 二 设计思路 三 源码 一 简介 支持在线检索音乐,支持实时浏览当前收藏的音乐及音乐数据的持久化。 二 设计思路 采用MVVM架构,前后端分离,子界面弹出始终位于主界面的中心。 三 源码 视窗引导启动源码: namesp…

MySQL(8)事务

目录 1.事务; 1.事务: 1.1 如果CURD不加限制会这么样子? 可能造成数据同时被修改, 数据修改的结果是未知的.(可以想一下之前的抢票线程问题) 1.2 事务概念: 事务就是一组DML语句组成,这些语句在逻辑上存在相关性,这一组DML语句要么全部成功&#xff0…

基于python旅游景点满意度分析设计与实现

1.1研究背景与意义 1.1.1研究背景 随着旅游业的快速发展,满意度分析成为评估旅游景点质量和提升游客体验的重要手段。海口市作为中国的旅游城市之一,其旅游景点吸引了大量游客。然而,如何科学评估和提升海口市旅游景点的满意度,…

【概率论三】参数估计:点估计(矩估计、极大似然法)、区间估计

文章目录 一. 点估计1. 矩估计法2. 极大似然法2.1. 似然函数2.2. 极大似然估计法 3. 评价估计量的标准3.1. 无偏性3.2. 有效性3.3. 一致性 二. 区间估计1. 区间估计的概念2. 正态总体参数的区间估计 参数估计讲什么 由样本来确定未知参数参数估计分为点估计与区间估计 一. 点估…

算法:二叉树相关

目录 题目一:单值二叉树 题目二:二叉树的最大深度 题目三:相同的树 题目四:对称二叉树 题目五:另一棵树的子树 题目六:二叉树的前序遍历 题目七:二叉树遍历 题目八:根据二叉…

linux搭建mysql主从复制(一主一从)

目录 0、环境部署 1、主服务器配置 1.1 修改mysql配置文件 1.2 重启mysql 1.3 为从服务器授权 1.4 查看二进制日志坐标 2、从服务器配置 2.1 修改mysql配置文件 2.2 重启mysql 2.3 配置主从同步 2.4 开启主从复制 3、验证主从复制 3.1 主服务器上创建test…

4款良心软件,免费又实用,内存满了都舍不得卸载

以下几款高质量软件,若是不曾体验,实在是遗憾可惜。 PDF Guru 这是一款开源免费的PDF编辑软件,打开之后功能一目了然。 可以拆分、合并PDF,也可以给PDF添加水印和密码,同时也可以去除别人PDF里的水印或密码&#xff0…

HouseCrafter:平面草稿至3D室内场景的革新之旅

在室内设计、房地产展示和影视布景设计等领域,将平面草稿图快速转换为立体的3D场景一直是一个迫切的需求。HouseCrafter,一个创新的AI室内设计方案,正致力于解决这一挑战。本文将探索HouseCrafter如何将这一过程自动化并提升至新的高度。 一、定位:AI室内设计的革新者 Ho…

【iOS】类对象的结构分析

目录 对象的分类object_getClass和class方法isa流程和继承链分析isa流程实例验证类的继承链实例验证 类的结构cache_t结构bits分析实例验证属性properties方法methods协议protocolsro类方法 类结构流程图解 对象的分类 OC中的对象主要可以分为3种:实例对象&#xf…

TDesign组件库日常应用的一些注意事项

【前言】Element(饿了么开源组件库)在国内使用的普及率和覆盖率高于TDesign-vue(腾讯开源组件库),这也导致日常开发遇到组件使用上的疑惑时,网上几乎搜索不到其文章解决方案,只能深挖官方文档或…

C++右值引用和移动语义

目录 概念: 左值引用和右值引用 概念: 注意: 左值引用的意义 作函数参数 函数引用返回 右值引用的意义 诞生背景 移动构造 移动赋值 其他应用 万能引用和完美转发 默认的移动构造和移动赋值 概念: 左值:顾…

VulnHub:CK00

靶场搭建 靶机下载地址:CK: 00 ~ VulnHub 下载后,在vmware中打开靶机。 修改网络配置为NAT 处理器修改为2 启动靶机 靶机ip扫描不到的解决办法 靶机开机时一直按shift或者esc直到进入GRUB界面。 按e进入编辑模式,找到ro,修…

思路|如何利用oneNote钓鱼?

本文仅用于技术研究学习,请遵守相关法律,禁止使用本文所提及的相关技术开展非法攻击行为,由于传播、利用本文所提供的信息而造成任何不良后果及损失,与本账号及作者无关。 本文来源无问社区,更多实战内容,…

[python]pycharm设置清华源

国内镜像源有以下几个,因为都是国内的,基本速度差不了太多。 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣&…

爬虫案例(读书网)(下)

上篇链接: CSDN-读书网https://mp.csdn.net/mp_blog/creation/editor/139306808 可以看见基本的全部信息:如(author、bookname、link.....) 写下代码如下: import requests from bs4 import BeautifulSoup from lxml import etreeheaders{…

scottplot5 中 使用signalXY图,如何更新数据?

🏆本文收录于《CSDN问答解答》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&…