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

news2024/11/26 22:49:44

一、同步代码和异步代码

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.coloradmin.cn/o/1178905.html

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

相关文章

[python 刷题] 437 Path Sum III

[python 刷题] 437 Path Sum III 之前有写过 Path Sum I & II, leetcode 112 & 113,虽然使用 JS 写的,不过 python 的实现也更新了一下 题目如下: Given the root of a binary tree and an integer targetSum, return the number o…

解释一下Node.js中的事件循环(event loop)

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

目前安卓、鸿蒙、澎湃的关系

1、了解AOSP是什么 AOSP全名为Android Open-Source Project,中文为安卓开源项目,开源即开放源代码。Android是一个基于Linux,由Google主导的开源系统。 2、AOSP谁的贡献最大? 3、华为的鸿蒙、小米的澎湃是套壳安卓吗&#xff1…

docker基础用法

docker基础用法 什么是docker docker中的容器: lxc --> libcontainer --> runC OCI Open Container-initiative 由Linux基金会主导于2015年6月创立旨在围绕容器格式和运行时制定一个开放的工业化标准contains two specifications the Runtime Specificat…

类的基本概念

类的概念是为了让程序设计语言能更清楚地描述日常生活中的事物。类是对某一类事物的描述,是抽象的、概念上的定义;而对象则是实际存在的属该类事物的具体个体,因而也称为实例(instance)。下面用一个现实生活中的例子来…

远程管理SSH服务

一、搭建SSH服务 1、关闭防火墙与SELinux # 关闭firewalld防火墙 # 临时关闭 systemctl stop firewalld # 关闭开机自启动 systemctl disable firewalld ​ # 关闭selinux # 临时关闭 setenforce 0 # 修改配置文件 永久关闭 vim /etc/selinux/config SELINUXdisabled 2、配置…

XShelll-修改快捷键-xftp-修改编辑器

文章目录 1.XShelll-修改快捷键2.Xftp-修改文本编辑器3.总结 1.XShelll-修改快捷键 工具>选项 鼠标键盘,右键编辑,新建快捷键。 复制粘贴改成shiftc,shiftv。更习惯一些。 2.Xftp-修改文本编辑器 xftp修改服务器文件默认的编辑器,是记…

2.3 - 网络协议 - ICMP协议工作原理,报文格式,抓包实战

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 ICMP协议 1、ICMP协议工作原理2、ICMP协议报文格式…

mysql 全文检索 demo

mysql5.6.7之后开始支持中文全文检索一直没用过,这次试试。 创建表 CREATE TABLE articles (id INT UNSIGNED AUTO_INCREMENT NOT NULL PRIMARY KEY,title VARCHAR (200),body TEXT,FULLTEXT (title, body) WITH PARSER ngram ) ENGINE INNODB DEFAULT CHARSETut…

维度使用AOP添加Name

1.添加文件 2.DimName注解,实体使用 package annotation;import MateTypeEnum;import java.lang.annotation.*;/*** 字典翻译注解** author pw*/ Documented Target(ElementType.FIELD)// 可用在方法名上 Retention(RetentionPolicy.RUNTIME)// 运行时有效 public interface…

Angew. Chem. Int. Ed.:Pt/Cu(111)上持续的氢溢出:气体诱导化学过程的动态观察

氢溢出是指游离氢原子从活性金属位点向相对惰性催化剂载体的表面迁移,在涉及氢的催化过程中起着至关重要的作用。然而,对氢原子如何从活性位点溢出到催化剂载体上的全面理解仍然缺乏。 基于此,福州大学林森教授等人报道了利用基于DFT的机器学…

Git 行结束符:LF will be replaced by CRLF the next time Git touches it问题解决指南

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

访问者模式-操作复杂对象结构

商场里有许多的店铺,大致分为服装区、饮食区及休闲区,每天都会有络绎不绝的不同角色(打工人、学生、有钱人)的人来逛商场。商场想开发个系统用来模拟这些人的在这些店铺的行为。 public class SuperMarket {public static void m…

Bi-TTCOF-Zn助力CO2还原制CO

精确调控氧化还原单元的组分、空间取向或连接模式对于深入了解高效的人工光合整体反应至关重要,但对于异质结构光催化剂而言,还很难实现。 基于此,华南师范大学兰亚乾教授和陈宜法教授等人报道了一系列用于人工光合综合反应的氧化还原分子结…

从零入门Chrome插件开发

什么是 Chrome 插件 谷歌浏览器在推出时就以其快速、安全和简洁的特点受到了广大用户的欢迎。随着浏览器的不断发展,谷歌为用户提供了插件开发平台,使开发者能够为浏览器添加各种功能和定制化选项。从此,插件成为了提升用户体验和个性化的重…

02|LangChain | 从入门到实战 -六大组件之Models IO

by:wenwenC9 上一篇文章 01|LangChain | 从入门到实战-介绍 一、Models IO 组成及其说明 与语言模型的交互,比如在线GPT系列,或各种离线模型 任何语言模型应用程序的核心元素都是XXX模型。LangChain 提供了与任何语言模型交互的…

[第二章—Spring MVC的高级技术] 2.1Spring MVC配置的替代方案

7.1.1 自定义DispatcherServlet配置 例如,在本章稍后的内容中(7.2节),我们将会看到如何在Spring MVC中处理multipart请求和文件上传。 如果计划使用Servlet 3.0对multipart配置的支持,那么需要使用DispatcherServlet的…

​软考-高级-信息系统项目管理师教程 第四版【第16章-项目采购管理-思维导图】​

软考-高级-信息系统项目管理师教程 第四版【第16章-项目采购管理-思维导图】 课本里章节里所有蓝色字体的思维导图

内窥镜项目

★ 手持pad内窥镜项目 项目描述:3D电子内窥镜软件项目是一个基于BS(浏览器服务器)架构的项目,旨在实现对内窥镜设备的远程控制和高级功能操作。该项目允许操作员使用平板电脑手动触摸屏上的按钮、外部按键或脚踏板 来控制内窥镜设…

[移动通讯]【Carrier Aggregation-11】【5G NR Carrier Aggregation (CA) basics 】

前言: 参考: RF Wireless world 里面的 《5G/NR - Carrier Aggregation》 《5G NR Carrier Aggregation (CA) basics | Carrier Aggregation frequency bands》 This page describes 5G NR Carrier Aggregation (CA) basics. It mentions Carrier Aggre…