AJAX-解决回调函数地狱问题

一、同步代码和异步代码

1.同步代码

浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作,在上一行完成之后才会执行下一行。这也使得它成为一个同步程序

总结来说:逐行执行,需原地等待结果后,才继续向下执行

2.异步代码

异步编程技术使你的程序可以在一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时,你的程序也将在任务完成后显示结果。

总结来说:调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数

3.JS中有哪些异步代码

setTimeout/setinterval

事件

AJAX

4.异步代码如何接收结果

依靠回调函数来接收

5.示例

AJAX-解决回调函数地狱问题_AJAX

AJAX-解决回调函数地狱问题_回调函数_02

AJAX-解决回调函数地狱问题_.net_03

1作为同步代码,立即执行,往下是3,是一个异步代码,先放一边,4也是一个异步代码,也放一边,2是一个同步代码,立即执行,然后等两秒一过,3开始执行,4是点击才执行

二、回调函数地狱

1.回调函数地狱代码演示

AJAX-解决回调函数地狱问题_回调函数_04

2.概念及缺点

通过上面例子我们不难发现,回调函数中嵌套着回调函数一直嵌套着下去就形成了回调函数地狱

缺点:可读性差,异常无法捕获,耦合性严重,牵一发动全身

三、解决回调函数地狱问题

1.Promise-链式调用

(1)概念

依靠then()方法返回一个新生成的Promise对象特性,继续串联下一环任务,直到结束

细节:then()回调函数中的返回值,会影响新生成的Promise对象最终状态和结果

好处:通过链式调用,解决回调函数嵌套问题

AJAX-解决回调函数地狱问题_回调函数_05

(2)模拟代码

AJAX-解决回调函数地狱问题_.net_06

(3)实际案列代码

AJAX-解决回调函数地狱问题_.net_07

AJAX-解决回调函数地狱问题_ios_08

2.async函数和await

(1) 定义

async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例,并且其中运行使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为而无需刻意地链式调用promise.

(2)概念

在async函数内,使用await关键字取代then函数,等待获取Promise对象成功状态的结果值

(3)代码示例

AJAX-解决回调函数地狱问题_AJAX_09

AJAX-解决回调函数地狱问题_回调函数_10

AJAX-解决回调函数地狱问题_回调函数_11

(4)async函数和await捕获错误

使用及语法:

AJAX-解决回调函数地狱问题_ios_12

示例如下:

AJAX-解决回调函数地狱问题_ios_13

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

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

相关文章

idea 2023 设置启动参数、单元测试启动参数

找到上方的editconfigration, 如下图,如果想在启动类上加,就选择springboot,如果想在单元测试加,就选择junit 在参数栏设置参数,多个参数以空格隔开 如果没有这一栏,就选择就可以了。 然后&…

【MongoDB】集群搭建实战 | 副本集 Replica-Set | 分片集群 Shard-Cluster | 安全认证

文章目录 MongoDB 集群架构副本集主节点选举原则搭建副本集主节点从节点仲裁节点 连接节点添加副本从节点添加仲裁者节点删除节点 副本集读写操作副本集中的方法 分片集群分片集群架构目标第一个副本集第二个副本集配置集初始化副本集路由集添加分片开启分片集合分片删除分片 安…

HK WEB3 MONTH Polkadot Hong Kong 火热报名中!

HK Web3 Month 11月除了香港金融科技周外,HK Web3 Month又是一大盛事,从10月29日开始开幕直到11月18日结束。此次将齐聚世界各地的Web3产业从业者、开发者、社群成员和学生来参与本次盛会。除外,超过75位产业知名的讲者与超过50场工作坊将为…

力扣算法-----一刷总结

之前学习算法题坚持不了几天就很容易放弃,一直没怎么系统的练习,偶然发现代码随想录居然推出了算法训练营,趁着时间比较足报了名跟着学习了两个月。 过去的两个月,中间伴着各种琐事,但还是坚持了下来,走过…

一键批量视频剪辑、合并,省时省力,制作专业视频

在当今数字化的时代,视频制作的需求日益增长。无论是个人用户还是专业人士,都需要能够快速、高效地处理视频,以适应不同的需求。但是,视频剪辑和合并往往是一个耗时且需要专业技能的过程。有没有一种方法可以简化这个过程&#xf…

VUE识别访问设备是移动端还是pc端

一、思路 有些网站需要区分手机端网页和pc端网页,做到不同设备访问不同的网页,增强用户的使用体验,可以在app.vue中作一个判断(navigator.userAgent),然后跳转不同的路由。 二、原理 navigator.userAgent …

Springboot中解析JSON字符串(jackson库ObjectMapper解析JSON字符串)

1、ObjectMapper与JSONObject比较 1、ObjectMapper属于jackson库的一部分,JSONObject属于alibaba的fastjson,两者各有优劣,可根据自己的系统环境选择使用哪种技术。 2、目前来看,Jackson社区相对活跃,Spring MVC和Spring Boot都…

号牌模拟数据生成

说明 自己开发的测试数据生成工具,用于生成数据训练对应模型。 项目 效果

小菜React

1、Unterminated regular expression literal, 对于函数就写.ts,有dom元素就写.tsx 2、 The requested module /src/components/setup.tsx?t1699255799463 does not provide an export named Father export default useStore默认导出的钩子,组件引入的…

AndroidStudio 运行报错:Invalid keystore format

AndroidStudio 运行报错:Invalid keystore format 把这玩意儿删了重新打开Android Studio运行一下就好了!!!

Linux中su鉴定故障解决办法

su鉴定故障问题 刚装完Linux的虚拟机,在终端中输入su命令,输入密码后出现鉴定故障。 原因是在安装linux系统时没有给root用户设置密码,重新设置密码即可。 解决步骤如下 设置root密码 sudo passwd root —>如果没有登录密码 则提示输入…

初识微服务技术栈

认识微服务 随着互联网行业的发展,对服务的要求也越来越高,服务架构也从单体架构逐渐演变为现在流行的微服务架构,这些架构之间有怎样的差别呢? 导学: 了解微服务的优缺点;了解微服务架构的演变过程&am…

安装RabbitMQ

安装RabbitMQ 下载需要的两个包 # 这直接就可以安装了,下面 ‘上传对应的rmp包’ 操作 [rootrabbitmq-1 ~]# curl -s https://packagecloud.io/install/repositories/rabbitmq/erlang/script.rpm.sh | sudo bash [rootrabbitmq-1 ~]# yum install erlang-21.3.8.2…

第四章IDEA操作Maven

文章目录 创建父工程开启自动导入配置Maven信息创建Java模块工程创建 Web 模块工程 在IDEA中执行Maven命令直接执行手动输入 在IDEA中查看某个模块的依赖信息工程导入来自版本控制系统来自工程目录 模块导入情景重现导入 Java 类型模块 导入 Web 类型模块 创建父工程 开启自动导…

STM32存储左右互搏 SPI总线读写FLASH W25QXX

STM32存储左右互搏 SPI总线读写FLASH W25QXX FLASH是常用的一种非易失存储单元,W25QXX系列Flash有不同容量的型号,如W25Q64的容量为64Mbit,也就是8MByte。这里介绍STM32CUBEIDE开发平台HAL库操作W25Q各型号FLASH的例程。 W25QXX介绍 W25QX…

10个python爬虫入门实例

昨天带伙伴萌学习python爬虫,准备了几个简单的入门实例 涉及主要知识点: web是如何交互的requests库的get、post函数的应用response对象的相关函数,属性python文件的打开,保存 代码中给出了注释,并且可以直接运行哦 如何安装requ…

栈(定义,基本操作,顺序存储,链式存储)

目录 1.栈的定义1.重要术语2.特点 2.栈的基本操作3.栈的顺序存储1.顺序栈的定义2.基本操作1.初始化2.进栈3.出栈4.读栈顶 3.共享栈 4.栈的链式存储 1.栈的定义 栈( Stack)是只允许在一端进行插入或删除操作的线性表。 一种受限的线性表,只能在栈顶进行插…

服务器数据库中了elbie勒索病毒怎么办,elbie勒索病毒解密,数据恢复

网络技术的不断成熟,为企业的生产运营提供了强有力的支撑,但是,随之而来的网络安全威胁也不断增加。云天数据恢复中心陆陆续续接到很多企业的求助,企业的服务器数据库e遭到了elbie勒索病毒攻击,导致企业计算机系统瘫痪…

AI:63-基于Xception模型的服装分类

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌在这个漫长的过程,中途遇到了不少问题,但是…

GEE: print 函数和 console.log 函数的区别

作者:CSDN _养乐多_ 本文记录了 print() 函数和 console.log() 函数的区别。print 函数是 GEE 中的内置函数,可以打印各种数据类型,包括数字、字符串、图像、特征集等,主要目的是帮助你调试代码和查看输出结果,以便更…