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

news2024/9/21 12:40:44

文章目录

    • 同步和异步
    • 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/1933234.html

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

相关文章

第二证券:深股和沪股区别?一文解析深股沪股区别?

深股,即在深圳证券生意所上市、生意的股票;沪股,即在上海证券生意所上市、生意的股票。 深市上市公司以小型和中型企业为主,上市条件相对较松;沪市的上市公司多为大型企业和国有企业,上市条件相对严峻。 …

Chromium CI/CD 之Jenkins实用指南2024- Windows节点开启SSH服务(七)

1.引言 在现代软件开发和持续集成的过程中,自动化部署和远程管理是不可或缺的关键环节。SSH(Secure Shell)协议以其强大的安全性和灵活性,成为连接和管理远程服务器的首选工具。对于使用Windows虚拟机作为Jenkins从节点的开发者而…

【整体介绍】HTML和JS编写多用户VR应用程序的框架

一、Networked-Aframe是什么? 简称NAF,底层基于Mozilla的AFrame框架,用HTML和JS编写多用户VR应用程序的框架。 二、特性 支持 WebRTC 和/或 WebSocket 连接。 语音聊天。音频流让您的用户在应用程序内交谈(仅限 WebRTC&#xff…

【cocos creator】ts中export的模块管理

在 TypeScript(TS)中,export 和 import 的概念与 Java 中的 public 类、接口以及 import 语句有一些相似之处。可以用以下方式来类比理解: Export 在 TypeScript 中,export 用于将模块中的变量、函数、类等暴露给外部…

白酒销售的新零售模式|琼台酱酒醉仙洞酒商业模式

近年来,酱酒在白酒市场中始终占据绝对C位,被称为“液体黄金”,其金融属性深受市场认同。酱酒之所以如此盛行,与其低风险、高收益、低门槛和快速变现能力密不可分。酒类流通市场的主要参与者包括上游的生产商、中游的酒类流通企业和…

服务器的80和443端口关闭也能申请SSL证书

一、简介 在服务器的80和443端口关闭的情况下,确实可以申请SSL证书,但申请过程和方法会根据证书类型和验证方式的不同而有所差异。 通常如果是网站域名申请SSL证书,哪怕服务器的80、443端口都打不开,也可以通过DNS解析的方式来验…

vue复制链接操作

vue复制链接操作 使用clipboardclipboard属性代码实现 发布测试出现问题问题分析解决方案最终代码实现document.execCommand扩展常用例子 给要复制的文本或者按钮加上点击事件后,并将要复制的值传过来 使用clipboard clipboard属性 –解释read从剪贴板读取数据&a…

代码重构思想和VSCode编辑器中代码重构插件

目录 一、参考资料 二、VSCode重构插件 1、小浣熊 (1)功能 (2)使用说明 2、Code Spell Checker 3、Abracadabra, refactor this! (1)重命名变量或函数名称 (2)提取变量 &a…

【STC89C51单片机】定时器/计数器的理解

目录 定时器/计数器1. 定时器怎么定时简单理解(加1经过了多少时间)什么是时钟周期什么是机器周期 2.如何设置定时基本结构相关寄存器1. TMOD寄存器2. TCON寄存器 代码示例 定时器/计数器 STC89C51单片机的定时器和计数器(Timers and Counter…

Talk|OSU汪博石:Transformer模型能否进行隐式的推理?关于Grokking和泛化的深入探索

本期为TechBeat人工智能社区第609期线上Talk。 北京时间7月17日(周三)20:00,俄亥俄州立大学博士生—汪博石的Talk已经准时在TechBeat人工智能社区开播! 他与大家分享的主题是: “Transformer模型能否进行隐式的推理?关于Grokking和泛化的深入…

【leetcode】 字符串相乘(大数相乘、相加)

记录一下大数相乘相加方法: 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式。 注意:不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: nu…

【C语言】联合体(union)

文章目录 1.联合体的含义2. 联合体的声明3. 联合体大小的计算4. 联合体的特点 1.联合体的含义 联合体也叫做共用体&#xff0c;是指联合体的所有成员共用同一块内存空间。这也就说明了&#xff0c;联合体的大小至少是其成员所占空间的最大值。 2. 联合体的声明 #include<…

CSS基础学习之元素定位(6)

目录 1、定位类型 2、取值 2.1、static 2.2、relative 2.3、absolute 2.4、fixed 2.5、stickty 3、示例 3.1、相对定位(relative) 3.2、绝对定位&#xff08;absolute&#xff09; 3.3、固定定位&#xff08;fixed&#xff09; 3.4、粘性定位&#xff08;sticky&…

力扣第九题(回文数)

9. 回文数 - 力扣&#xff08;LeetCode&#xff09; 提示 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读…

Husco在汽车自动变速器电磁阀总产量超1200万台最大汽车电磁阀线圈制造商Amisco同时高产量增长

Husco Inc.是一家位于美国威斯康星州的汽车零部件制造商&#xff0c;专门生产汽车自动变速器电磁阀。根据最新的数据&#xff0c;Husco的汽车自动变速器电磁阀总产量已经超过了1200万台&#xff0c;成为全球最大的汽车电磁阀生产商之一。 与此同时&#xff0c;Amisco是一家专门…

(21)起落架/可伸缩相机支架

文章目录 前言 1 连接到自动驾驶仪 2 通过任务规划器设置 3 其他参数 4 参数说明 前言 Copter 和 Plane 支持可伸缩的起落架/相机支架&#xff0c;由伺服机制激活&#xff08;如 Hobby King 出售的用于copters 的这些&#xff09;。齿轮/支架可以手动缩回或用一个辅助开关…

STM32 IAP 需要关注的一些事

1、首先要知道STM32的程序是如何分布在FLASH中的。 2、升级的时候涉及到两个程序&#xff0c;一个是bootloader&#xff0c;一个是user程序&#xff0c;这两个程序的功能分别的什么作用的&#xff1f; 3、编译的固件是怎么分布的&#xff1f;通过那个配置文件去指导编译器去排布…

Stable Diffusion:解锁AI绘画新纪元的保姆级入门指南

在这个数字艺术日新月异的时代&#xff0c;Stable Diffusion如同一股清新的风&#xff0c;吹散了传统绘画的界限&#xff0c;让每个人都能成为创意无限的数字艺术家。作为一款基于Transformer结构的文本到图像生成模型&#xff0c;Stable Diffusion以其惊人的生成速度、细腻的画…

Android 12系统源码_存储(二)StorageManagerService服务

前言 在 Android 系统中&#xff0c;StorageManagerService是一个用于获取存储设备信息和管理存储设备的服务。它提供了一系列方法&#xff0c;可以获取当前挂载的存储设备信息&#xff0c;以及对存储设备进行挂载和卸载操作。 一、Storage存储模块介绍 1.1、StorageManager…

思路|如何利用oneNote钓鱼?

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