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

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

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

相关文章

CSDN每日一题学习训练——Java版(对给定的两个日期之间的日期进行遍历、子集 II、填充每个节点的下一个右侧节点指针)

版本说明 当前版本号[20231107]。 版本修改说明20231107初版 目录 文章目录 版本说明目录对给定的两个日期之间的日期进行遍历题目解题思路代码思路参考代码 子集 II题目解题思路代码思路参考代码 填充每个节点的下一个右侧节点指针题目解题思路代码思路参考代码 对给定的两…

网络工程师回顾学习(第二部分)

第六章:网络互连与互联网 需要掌握: (1)网络互连设备 (2)网络互连的基本原理和关键技术 (扩展:TCP/IP协议簇) (3)Internet协议及其提供的网络…

Linux/centos上如何配置管理Web服务器?

Linux/centos上如何配置管理Web服务器? 1 Web简单了解2 关于Apache3 如何安装Apache服务器?3.1 Apache服务安装3.2 httpd服务的基本操作 4 如何配置Apache服务器?4.1 关于httpd.conf配置4.2 常用指令 5 简单实例 1 Web简单了解 Web服务器称为…

大数据学习之一文学会Spark【Spark知识点总结】

文章目录 什么是SparkSpark的特点Spark vs HadoopSparkHadoopSpark集群安装部署Spark集群安装部署StandaloneON YARN Spark的工作原理什么是RDDRDD的特点Spark架构相关进程Spark架构原理 Spark实战:单词统计Scala代码开发java代码开发任务提交 Transformation与Acti…

机器学习模板代码(期末考试复习)自用存档

机器学习复习代码 利用sklearn实现knn import numpy as np import pandas as pd from sklearn.neighbors import KNeighborsClassifier from sklearn.model_selection import GridSearchCVdef model_selection(x_train, y_train):## 第一个是网格搜索## p是选择查找方式:1是欧…

【CSP认证考试】202309-1:坐标变换(其一)100分解题思路+代码

解题思路 暴力解决,不考虑时空开销就一直用for循环也可以做出来。按照题目意思输入两个数组,然后将第一个输入的数组的x部分累加起来记作x,再将y部分累加起来记作y。再将第二个数组的x部分都加上x,y部分加上y。最后输出第二个数组…

【分布式事务】初步探索分布式事务的概率和理论,初识分布式事的解决方案 Seata,TC 服务的部署以及微服务集成 Seata

文章目录 一、分布式服务案例1.1 分布式服务 demo1.2 演示分布式事务问题 二、分布式事务的概念和理论2.1 什么是分布式事务2.2 CAP 定理2.3 BASE 理论2.4 分布式事务模型 三、分布式事务解决方案 —— Seata3.1 什么是 Seata3.2 Seata 的架构3.3 Seata 的四种分布式事务解决方…

2023中国视频云市场报告:腾讯云音视频解决方案份额连续六次蝉联榜首,加速全球化布局

近日,国际数据公司(IDC)发布了《中国视频云市场跟踪(2023上半年)》报告,腾讯云音视频的解决方案份额连续六次蝉联榜首,并在视频生产创作与媒资管理市场份额中排名第一。同时,在实时音…

深入理解 Django 模板系统

概要 在任何 Web 开发过程中,渲染和展示数据是不可或缺的一部分。Django 作为一个高效的 Python Web 框架,提供了一个强大且灵活的模板系统。本文将详细介绍 Django 模板系统的核心概念、语法和高级功能。 一、Django 模板系统简介 Django 的模板系统允…

Android修行手册 - 模板匹配函数matchTemplate详解,从N张图片中找到是否包含五星

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 👉关于作者 专注于Android/Unity和各种游戏开发技巧,以及各种资源分享&…

Qt OpenGL相机系统

文章目录 一、简介二、实现代码三、实现效果参考资料效果展示 一、简介 一直偷懒没有学习OpenGL,乘着这段有点时间重新学习一下OpenGL,做一个简单的小工具,有助于后面理解OSG。我们都知道OpenGL中存在着下面几个坐标空间:模型空间(物体空间)、世界空间、观察空间(或者称…

五、计算机网络

(一)OSI/RM 七层模型 七层模型是计算机网络的基石,整个计算机网络是构建与七层模型之上的。 在数据链路层,数据开始以帧为单位,网卡的 MAC 地址就是数据帧的地址,数据的传输开始有地址了。 局域网是工作…

JavaWeb Day05 前后端请求响应与分层解耦

目录 一、请求与响应 (一)请求的参数接收 ①数组参数 ②集合参数 ③日期参数 ④json参数 ⑤路径参数 总结 (二)响应 ①简单文本text ②数组 ③列表 ④同一响应数据格式 ⑤总结 二、三层架构与分层解耦 &#xff0…

昇腾CANN 7.0 黑科技:大模型推理部署技术解密

CANN作为最接近昇腾AI系列硬件产品的一层,通过软硬件联合设计,打造出适合昇腾AI处理器的软件架构,充分使能和释放昇腾硬件的澎湃算力。针对大模型推理场景,CANN最新发布的CANN 7.0版本有机整合各内部组件,支持大模型的…

Vue路由介绍及使用

一、单页应用程序介绍 1.概念 单页应用程序:SPA【Single Page Application】是指所有的功能都在一个html页面上实现,当切换不同的功能时,页面不会进行刷新,类似Ajax请求,但请求地址会发生部分变化。 2.具体示例 单…

深度学习环境搭建入门环境搭建(pytorch版本)

从Python安装到深度学习环境搭建 1. Anaconda安装 python可以通过官网下载exe,这里提供的是使用anaconda创建多个虚拟 的python环境,使用Anaconda Prompt管理虚拟环境更方便。 官网地址:Free Download|Anaconda 下载到本地后双击此文…

WPF中数据绑定验证深入讲解

WPF中数据绑定验证深入讲解 WPF在用户输入时,提供了验证功能,通常验证使用以下两种方式来实现: 在数据对象中引发错误。通常是在属性设置过程中抛出异常,或者在数据类中实现INotifyDataErrorInfo或IDataErrorInfo接口。在绑定级…

技术分享 | 测试平台开发-前端开发之数据展示与分析

测试平台的数据展示与分析,我们主要使用开源工具ECharts来进行数据的展示与分析。 ECharts简介与安装 ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表&#xff…

Appium —— 初识移动APP自动化测试框架Appium

说到移动APP自动化测试,代表性的测试框架非Appium莫属,从今天开始我们将从APP结构解析、Appium框架学习、安卓/iOS自动化测试实战、自动遍历回归测试、自动化测试平台及持续集成,多个维度一起由浅入深的学废Appium 今天我们先来初步认识Appi…

C++中将数据添加到文件的末尾

参考:https://blog.csdn.net/qq_23880193/article/details/44279283 C中文件的读取需要包含fstream文件,即:#include 文件的读取和写入是是通过流操作来的,这不像输入、输出流那样,库中已经定义了对象cin和cout 文件的读取需要声…