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.hqwc.cn/news/164013.html

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

相关文章

【Database System Concept 7th】Chapter 24 Advanced Indexing Techniques 读书笔记

Chapter 24 Advanced Indexing Techniques 24.5 Hash Indices24.5.1 Static Hashing24.5.2 Dynamic Hashing24.5.2.1 Data Structure24.5.2.2 Queries and Updates 24.5 Hash Indices 24.5.1 Static Hashing 这一部分就不介绍了,在14.5中已经介绍过了。 24.5.2 D…

Kotlin基础数据类型和运算符

原文链接 Kotlin Types and Operators Kotlin是新一代的基于JVM的静态多范式编程语言,功能强大,语法简洁,前面已经做过Kotlin的基本的介绍,今天就来深入的学习一下它的数据类型和运算操作符。 数据类型 与大部分语言不同的是&am…

2、Sentinel基本应用限流规则(2)

2.2.1 是什么 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制、熔断降级、系统负载保护等多个维度来帮助用户保护服务的稳定性。 2.2.2 基本概念 • 资源 (需要被保护的东西…

Chrome插件精选 — 广告拦截插件

Chrome实现同一功能的插件往往有多款产品,逐一去安装试用耗时又费力,在此为某一类型插件挑选出比较好用的一款或几款,尽量满足界面精致、功能齐全、设置选项丰富的使用要求,便于节省一个个去尝试的时间和精力。 1. Adblock Plus 广…

奔驰E Coupe 升级鼠标按键 操作简单 完美结合

人机交互系统正是汽车智能化发展的产物,它实现了人与车之间的互联。不知道大家有没有发现,在很多奔驰车的中央扶手箱前,有一块类似于“鼠标”的操作区,它并不是我们常见的换挡杆,而是奔驰研发的独立影音控制系统COMAND…

APP开发:用途与未来前景|软件定制开发|网站小程序建设

APP开发:用途与未来前景|软件定制开发|网站小程序建设 APP开发已成为现代科技趋势的一部分,无论是日常生活还是商业领域,都有它的身影。通过开发APP,我们可以将想法、功能和内容转化为直观、易用的移动设备应用程序,满…

chrome v3开发插件实现所有网站允许跨域

场景: chrome 插件 升级到v3后,原来修改请求响应都变成异步,即无法同步拦截来修改请求响应。 在v3中也不支持修改请求响应内容。 问题:如何在chrome v3中允许其他网站跨域呢。 方式一:禁用chrome跨域,禁…

云安全—Dashboard 攻击面

0x00 前言 众所周知,如果只是一味的REST接口或者命令行话的操作方式,就会变相的提高操作门款,并且不会有很好的呈现方式,所以就有了web ui的方式,也就是Dashboar面板,本篇主要讨论一下关于Dashboar面板的概…

虹科示波器 | 汽车免拆检测 | 2017款长安福特翼虎车发动机故障灯异常点亮

一、故障现象 一辆2017款长安福特翼虎车,搭载CAF488WQ9发动机,累计行驶里程约为8.9万km。该车因发动机故障灯异常点亮在其他维修厂检修,维修人员用故障检测仪检测,提示气缸3失火,调换火花塞、点火线圈及喷油器&#xf…

图论——并查集

参考内容: 图论——并查集(详细版) 并查集(Disjoint-set)是一种精巧的树形数据结构,它主要用于处理一些不相交集合的合并及查询问题。一些常见用途,比如求联通子图、求最小生成树的 Kruskal 算法和求最近公共祖先&…

如何实现生产质量精细化管理?

导 读 ( 文/ 1528 ) 在现代制造业中,实现生产质量的精细化管理对企业的竞争力至关重要。本文将介绍三个关键步骤,包括建立全面质量管理体系、采用数据驱动的质量监控和实时反馈机制,以及持续改进和员工培训,帮助企业实现生产质量的…

文献阅读 - JADE:具有可选外部存档的自适应差分进化

文章目录 标题摘要关键字结论研究背景I. INTRODUCTION 常用基础理论知识II. BASIC OPERATIONS OF DEIII. ADAPTIVE DE ALGORITHMSA. DESAPB. FADEC. SaDED. jDE 研究内容、成果IV. JADEA. DE/Current-to-pbestB. Parameter AdaptationC. Explanations of the Parameter Adaptat…