前端大厂面试题探索编辑部——第四期

目录

题目

单选题

题解

JavaScript的异步编程

Promise

异步函数async/await

关于Ajax


题目

       这期只有一道题,我们来详细讲讲JavaScript的异步编程,当然,异步编程是许多编程语言都有的一种编程思想,我们在前端这个领域,专注学清楚JavaScript和TypeScript就行。

单选题

6.考虑以下关于 JavaScript 异步编程的说法,哪个是正确的()

A. Promise 对象是一种代表异步操作最终完成或者失败的对象。

B. setTimeout 函数保证在设定的时间后立即执行回调函数。

C. async/await 可以用在普通函数中,不需要函数被声明为异步函数。

D. 在 JavaScript 中,Ajax操作都是非阻塞的。

题解

JavaScript的异步编程

       要讲就细致一些讲吧,异步,有编程基础的会知道,我们可以不必等待一段代码执行完之后,再去执行下面的代码,如果在等待其他操作完成的同时,即使运行其他代码,系统也能保持稳定,那么我们务实一点来说,是可以选择异步编程这种思想的。JavaScript在设计之初,是一门单线程的语言,但是我们可以通过一些手段,来完成异步编程

Promise

       JavaScript中的异步编程,绕不开Promise,国内可以翻译为“期约”,但我觉得我们还是就称为Promise好一些。Promise是ECMAScript6新增的,Promise本身是一种类型,即引用类型,本质是个对象,可以通过new操作符来实例化,比如下面的代码。

Let p = new Promise( () => {})
​
setTimeout(console.log, 0, p)

       我在读《JavaScript高级程序设计》这本书的时候,书中向读者介绍了一种思想,就是我们可以把Promise看成一个状态机,书中直接就称其为期约状态机,主要有三种状态:待定(pending),兑现(fulfilled或resolved)和拒绝(rejected),Promise只可能是这三种状态,而且特别要注意的是:无论落定哪种状态都是不可逆的。同时,Promise的状态是私有的,JavaScript不能检测到其是哪种状态。

       Promise既然是对象,那么它肯定有对应的方法,如前所述,我们说的待定状态有可能转换为兑现和拒绝这两种状态,控制Promise状态状态的转换是通过调用它的两个函数参数实现的,分别是resolve()和reject(),比如我们写下这样的代码,在浏览器中就会有这样的输出。

let p1 = new Promise((resolve,reject) => resolve())
setTimeout(console.log,0,p1)

let p2 = new Promise((resolve,reject) => reject())
setTimeout(console.log,0,p2)

       但回到这期的主题,异步编程,其实这部分代码并不是异步操作,我们来一个实际的例子,来说明Promise是如何完成异步操作的。

function performAsyncTask() {
    return new Promise((resolve, reject) => {
        //我们使用setTimeout模拟异步操作,在2秒后执行
        setTimeout(() => {
            // 随机决定成功或失败
            const isSuccess = Math.random() > 0.5
            if (isSuccess) {
                // 操作成功
                resolve("成功")
            } else {
                // 操作失败
                reject("失败")
            }
        }, 2000)
    });
}

// 调用 performAsyncTask 并处理 Promise
performAsyncTask()
    .then(successMessage => {
        console.log(successMessage)
        // 成功处理逻辑
    })
    .catch(errorMessage => {
        console.error(errorMessage)
        // 失败处理逻辑
    })

       我们通过定义一个函数performAsyncTask,这个函数中我们返回一个Promise对象实例,用setTimeout模拟异步操作,真正执行了异步编程的是调用performAsyncTask这一部分。Promise这个请求会在未来的某个时刻返回数据,要么成功,要么失败。

       或许会有读者会提出这样的问题,我们声明一个自定义的对象,似乎也能完成这个操作?理论上是可以的,但别忘了,我们使用的resolve和reject方法,都是Promise对象已经有的方法,如果自定义对象,你还要自定义这些功能函数。通过前面的例子,其实选项A自然已经有答案了,Promise对象是一种代表异步操作最终完成或者失败的对象。Promise的优点在于它可以用一种链式结构,把多个异步操作串联起来

       同时,这里我们也用到了setTimeout函数,正确的表述是:setTimeout保证的是,在设定的时间后,回调函数被添加到任务队列中,如果任务队列中已经有其他任务在等待,那么回调函数需要等待其他任务执行完毕之后才能执行

异步函数async/await

       async/await是ES8规范新增的,这个异步函数的引入,让程序员可以以同步方式写的代码,能够异步执行。规范来讲,JavaScript的异步编程的方式只有两种:Promise和回调函数,async/await其实是基于Promise的更方便的方式,async/await都是关键字,所以其实这种一种编程方式。所以,使用了async/await关键字的函数,就是异步函数了,不再是普通函数了

       比如这个例子,用async来表示这个函数是一个异步函数,我还是选择用Promise对象作为返回值,这样就表明了我们在使用异步编程,这里我就先简单的例子来。输出结果为3。

async function f0() { 
 let a = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3)); 
 console.log(await a); 
} 
fo()
关于Ajax

       完整的Ajax的介绍,我就不详细讲了,后面我会专门出文章,讲一讲网络请求。我们需要记住的是:Ajax中的XMLHttpRequest是有同步和异步两种设置的,如果我们在open方法的参数中,设置为true,即异步的Ajax,那么它是阻塞的;而如果把参数设置为false,Ajax就是同步的,同步的Ajax就是非阻塞的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫:XPath基本语法

XPath(XML Path Language)是一种用于在XML文档中定位元素的语言。它使用路径表达式来选择节点或节点集,类似于文件系统中的路径表达式。 不啰嗦,讲究使用,直接上案例。 导入 pip3 install lxmlfrom lxml import etr…

springboot中获取配置文件中属性值的几种方式

目录 第一章、使用Value注解第二章、使用PropertySource注解第三章、使用Configurationproperties注解第四章、使用Java Properties类第五章、使用Environment接口 友情提醒: 先看文章目录,大致了解文章知识点结构,点击文章目录可直接跳转到文章指定位置…

旋转花键磨损后如何修复?

旋转花键是机械传动中的一种,传递机械扭矩的,在轴的外表有纵向的键槽,套在轴上的旋转件也有对应的键槽,可保持跟轴同步旋转。在旋转的同时,有的还可以在轴上作纵向滑动,如变速箱换档齿轮等。 我们在使用某些…

VirtualBox安装Ubuntu22.04

目录 1、新建虚拟机 1.1、设置内存大小 1.2、创建虚拟硬盘 2、虚拟机设置 2.1、设置启动顺序​编辑 2.2、选择iso镜像文件 2.3、设置网络(桥接网卡) 3、启动 3.1、设置语言环境 3.2、系统更新安装(不更新) 3.3、选择键盘布局(默认即可) 3.4、选择安装类型 3.5、网…

项目实战:一个基于标准库的具备最值获取的万能容器实现

目录 写在前面 需求 分析 接口设计 项目实现 一些思考与总结 致谢 写在前面 刚刚介绍了变参模板和完美转发,现在换一换脑子做一个小的项目实战吧。博主最近学习的是标准库,总体来说,我认为标准库中的内容是很trivial的,重点…

STM32实时时钟(RTC)的配置和使用方法详解

实时时钟(RTC)是STM32系列微控制器上的一个重要模块,用于提供准确的时间和日期信息。在本文中,我们将详细介绍STM32实时时钟的配置和使用方法。 ✅作者简介:热爱科研的嵌入式开发者,修心和技术同步精进 ❤欢…

【C++】默认成员函数

与普通成员函数差距较大,形式对于我们比较陌生,但这是语法,是我们是必须要掌握的。 目录 类的默认成员函数:构造函数:概念:语法:特性: 析构函数:概念:语法&a…

Django模型(七)

一、聚合与分组查询 1.1、准备数据 class Cook(models.Model):"""厨师"""name = models.CharField(max_length=32,verbose_name=厨师名)level = models.IntegerField(verbose_name=厨艺等级)age = models.IntegerField(verbose_name=年龄)sect …

消息中间件之RocketMQ源码分析(三)

RocketMQ中的Consumer启动流程 RocketMQ客户端中有两个独立的消费者实现类分别为DefaultMQPullConsumer和DefaultMQPushConsumer, DefaultMQPullConsumer DefaultMQPullConsumer,该消费者使用时需要用户主动从Broker中Pull消息和消费消息,提交消费位点…

Springboot-SpringCloud学习

文章目录 web项目开发历史 SpringBootSpring以及Springboot是什么微服务第一个Springboot项目配置如何编写 yaml自动装配原理集成 web开发(业务核心)集成 数据库 Druid分布式开发:Dubbo(RPC) zookeeperswagger&#x…

掌握使用 React 和 Ant Design 的个人博客艺术之美

文章目录 前言在React的海洋中起航安装 Create React App安装Ant Design 打造个性化的博客风格通过路由实现多页面美化与样式定制部署与分享总结 前言 在当今数字时代,个人博客成为表达观点、分享经验和展示技能的独特平台。在这个互联网浪潮中,选择使用…

新火种AI|脑洞照进现实!马斯克正式官宣,已将芯片连入大脑...

作者:小岩 编辑:彩云 2024年1月30日,马斯克在社交媒体上宣布,他的公司Neuralink已经完成了首例人类大脑芯片植入手术,并且目前手术恢复状况良好。这一突破性进展意味着人类距离实现大脑与电脑的直接连接更近了一步。…

【mysql】InnoDB引擎的索引

目录 1、B树索引 1.1 二叉树 1.1.1 二分查找(对半查找) 1.1.2 树(Tree) 1.1.2.1 树的定义 1.1.2.2 树的特点 1.1.2.3 二叉树 1.1.2.4 二叉查找(搜索)树 1.2 B树 1.2.1 聚簇索引(clust…

AI-数学-高中-14-函数零点存在定理和运用

原作者视频:【函数综合】【考点精华】1零点存在性定理的运用(基础)_哔哩哔哩_bilibili 1.定义: 2.零点存在定义: 2.函数零点与图像焦点的转化 零点如果不好求,将函数化成两个函数再画图,看函数…

防抖和节流?有什么区别?如何实现?

#一、是什么 本质上是优化高频率执行代码的一种手段 如:浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能 为了优化体验,需要对这类…

计算机网络-物理层传输介质(导向传输介质-双绞线 同轴电缆 光纤和非导向性传输介质-无线波 微波 红外线 激光)

文章目录 传输介质及分类导向传输介质-双绞线导向传输介质-同轴电缆导向传输介质-光纤非导向性传输介质小结 传输介质及分类 物理层规定电气特性:规定电气信号对应的数据 导向传输介质-双绞线 双绞线的主要作用是传输数据和语音信息。它通过将两根导线以特定的方…

python爬虫2

1.table 是表格&#xff0c;tr是行&#xff0c;td是列 ul li是无序列标签用的较多&#xff0c;ol li是有序列标签 最基本的结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title> Title </title>…

【JavaEE】UDP协议与TCP协议

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…

CSS复合选择器

目录 1.什么是复合选择器 2.后代选择器 3.子选择器 4.并集选择器 5.伪类选择器 5.1链接伪类选择器 5.2 :focus 伪类选择器 6.总结 7.补充 7.1相邻兄弟选择器&#xff08;也叫加号选择器&#xff09; 7.2通用兄弟选择器&#xff08;也叫波浪号选择器&#xff09; 1. 什…

力扣hot100 划分字母区间 贪心 思维 满注释版

Problem: 763. 划分字母区间 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 代码随想录 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) Code class Solution {public List<Integer> partitionLabels(String s){// 创建哈希…
最新文章