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

http://www.lryc.cn/news/402034.html

相关文章:

  • Redis数据结构--跳跃表 Skip List
  • 线状激光模组定制厂家哪家好?具体怎么收费?
  • 【Python游戏】编程开发贪吃蛇游戏(第一期)
  • 【机器学习入门】拥抱人工智能,从机器学习开始
  • 【React打卡学习第一天】
  • matlab PID tuner整定工具箱的用法
  • 富格林:可信办法阻挠虚假受骗
  • OPPO 2024届校招正式批笔试题-后端(C卷)
  • HTTP请求五类状态码详细介绍,以及部分处理思路
  • Log4j的原理及应用详解(三)
  • 【深度学习】PyTorch框架(4):初始网络、残差网络 和密集连接网络
  • 【关于PHP性能优化,内存优化,日志工具等问题处理】
  • R-CNN、Fast R-CNN和Faster R-CNN:目标检测的进化之路
  • Yolov8网络结构学习
  • 5.5 软件工程-系统测试
  • 网络故障处理及分析工具:Wireshark和Tcpdump集成
  • UDP客户端、服务端及简易聊天室实现 —— Java
  • 下载安装nodejs npm jarn笔记
  • Calibration相机内参数标定
  • MySQL源码安装
  • gtest单元测试:进程冻结与恢复管理模块的单元测试实现
  • Flutter动画详解第二篇之显式动画(Explicit Animations)
  • python常用模块(JSON与pickle、Os模块)
  • MMLab-dataset_analysis
  • 艺术与技术的交响曲:CSS绘图的艺术与实践
  • 基于 JAVA 的旅游网站设计与实现
  • 【C++深度探索】二叉搜索树的全面解析与高效实现
  • Java实习记录 1 ——初入职场
  • opencv—常用函数学习_“干货“_3
  • 用Docker来开发