AJAX-综合

文章目录

    • 同步代码和异步代码
    • 回调函数地狱
    • 解决回调函数地狱
      • Promise-链式调用
      • async函数和await
      • async函数和await-捕获错误
    • 事件循环
    • 宏任务与微任务
    • Promise.all静态方法


同步代码和异步代码

  • 同步代码:逐步执行,需原地等待结果后,才继续向下执行
  • 异步代码:调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数

在这里插入图片描述

回调函数地狱

概念:在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱
缺点:可读性差,异常无法捕捉,耦合性严重,牵一发而动全身

解决回调函数地狱

Promise-链式调用

概念:依靠then()方法会返回一个新生成的Promise对象特性,继续串联下一环任务,直到结束
细节:then()回调函数中的返回值,会影响新生成的Promise对象最终状态和结果
好处:通过链式调用,解决回调函数嵌套问题
在这里插入图片描述

async函数和await

async函数是AsyncFunction构造函数的实例,并且允许使用await关键字。aysnc和await关键字让我们用一种更简洁的方式写出基于Promise的异步代码,而无需刻意地链式调用Promise。
概念:在async函数内,使用await关键字取代then函数,等待获取Promise对象成功状态的结果值

async函数和await-捕获错误

使用:try...catch
标记要尝试的语句块,并指定一个出现异常时抛出的响应。
语法:

try {// 要执行的代码
} catch (error) {// error接收的是错误信息// try里代码,如果有错误,直接进入这里执行
}

事件循环

概念:JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。
原因:JavaScript单线程,为了让耗时代码不阻塞其他代码运行,设计了事件循环模型
定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行任务,就叫事件循环。
执行过程:

  • 执行异步代码,遇到异步代码交给宿主浏览器环境执行
  • 异步拥有结果后,把回调函数放入任务队列排队
  • 当调用栈空闲后,反复调用任务队列里的回调函数

宏任务与微任务

异步任务分为:

  • 宏任务:由浏览器环境执行的异步代码
  • 微任务:由JavaScript引擎环境执行的异步代码
任务(代码)执行所在环境
JavaScript脚本执行事件(script)浏览器
setTimeout/setInterval浏览器
AJAX请求完成事件浏览器
用户交互事件浏览器
Promise对象.then()JavaScript引擎

注意:Promise本身是同步的,而then和catch回调函数是异步的
执行过程:

  • 执行第一个script脚本事件宏代码,里面同步代码
  • 遇到宏任务/微任务交给宿主环境,有结果回调函数进入对应队列
  • 当执行栈空闲时,清空微任务队列,再执行下一个宏任务,从1再来

在这里插入图片描述

Promise.all静态方法

概念:合并多个Promise对象,等待所有同时成功完成(或某个失败),做后续逻辑
在这里插入图片描述
语法:

const p = Promise.all([Promise对象,Promise对象,...])
p.then(result => {// result结果:[Promise对象成功结果,Promise对象成功结果,...]
}).catch(error =>{// 第一个失败的Promise对象抛出的异常
})

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

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

相关文章

阿里云效流水线—发布公用jar到Maven私仓

后端项目发布 1.选择流水线 2.新建流水线 3.选择模板 4.选择代码仓库 5.调整构建命令 添加mvn install 重新构建项目 6.添加镜像 在wms-app目录下新建Dockerfile文件(Dockerfile文件名中的D一定要是大写的)文件,重新推送项目 #基础镜像 FROM openjd…

【力扣hot100】1. 两数之和 49.字母异位词分组 128. 最长连续序列

目录 1. 两数之和题目描述做题思路参考代码 49.字母异位词分组题目描述做题思路参考代码 128. 最长连续序列题目描述做题思路参考代码 1. 两数之和 题目描述 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数…

EPO企业生产运营数智化平台助力制造企业迈向智能制造

随着“中国制造2025”和工业4.0的不断推进,越来越多的制造企业准备迈入智能制造和智慧制造领域,实现数智化管理。企业通过搭建EPO企业生产运营平台,结合自身业务现状和数字化需求,从各个业务场景、部门人员、产品组成等方面进行分…

Django缓存(二)

一、视图缓存 Django的缓存可以设置缓存指定的视图,具体方式使用django.views.decorators.cache.cache_page, 方法有2种方式: 装饰器:以方法以装饰器的方式使用 from django.views.decorators.cache import cache_page@cache_page(60 * 15,cache="default") def…

【算法每日一练]-图论(保姆级教程篇16 树的重心 树的直径)#树的直径 #会议 #医院设置

目录 树的直径 题目:树的直径 (两种解法) 做法一: 做法二: 树的重心: 题目: 会议 思路: 题目:医院设置 思路: 树的直径 定义:树中距离最…

科技革新背后:码垛机器人在不同领域的实践应用

随着科技的进步,机器人技术已经渗透到各个行业之中,成为提高生产效率、减少人工成本的重要工具。码垛机器人作为自动化技术的杰出代表,其在各个行业中的应用场景日益广泛,从食品饮料到化工产品,再到物流仓储&#xff0…

睿考网:注册会计师考试有年龄限制吗?

参加注册会计师考试是否有年龄限制?现行的规定并没有要求考生的年龄,所以只要符合既定的报名条件任何人都是可以参加的。 报名资格要求如下: 1. 报考者须为中国国籍公民,并且具备完全的民事行为能力。 2. 学历要求方面&#xf…

CSS的特殊技巧

1.精灵图 使用精灵图核心总结: 1. 精灵图主要针对于小的背景图片使用。 2. 主要借助于背景位置来实现--- background-position 。 3. 一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值&#xf…

海康威视-AIOT的业务转型

海康威视的转型和定位为智能物联网(AIoT)解决方案和大数据服务的提供商。 公司不仅仅聚焦于其核心的视频监控业务,而且正在积极拓展到新的技术领域和市场。通过专注于物联感知、人工智能、大数据等技术的创新,对未来技术发展方向的…

生产计划数据模型,实现能源企业数字化高效管理

随着市场经济的快速发展,能源企业在经济发展中的地位也随之提高。但由于能源企业在生产计划经济管理上存在指标不平衡、市场观念落后和环保意识欠缺等问题,导致企业的经济效益降低。目前,提高企业的生产计划管理是改善能源企业现状最有利的途…

计算机网络:物理层下的传输媒体概览

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

MySQL---视图

目录 一、介绍 二、语法 三、视图的更新 四、视图作用 一、介绍 视图(View)是一种虚拟存在的表。视图中的数据并不在数据库中实际存在,行和列数据来自定义视图的查询中使用的表,并且是在使用视图时动态生成的。 通俗的讲&#…

Ambari——编译——解决解决windows和linux下phantomjs链接超时问题

您的支持是我继续创作与分享的动力源泉!!! 您的支持是我继续创作与分享的动力源泉!!! 您的支持是我继续创作与分享的动力源泉!!! 错误日志: [INFO] Copying extracted folder C:\Users\LENOVO\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1786692…

『K8S 入门』三:资源调度

『K8S 入门』三:资源调度 一、Label 和 Selector 可以通过 Selector 基于 Label 匹配需要的资源 Label 标签 配置文件中(metadata.labels)配置 metadata: # Pod相关的元数据,用于描述Pod的数据name: nginx-demo #Pod的名称lab…

后端Jwt实现Token编码、解码以及axios的request请求头的Token传输方式

目录 一、什么是JWT: 二、Jwt的使用: 第一步:引入依赖: 第二步:配置拦截器:JwtInterceptor.java: 其中异常文件ServiceException配置如下: 全局异常文件GlobalException.java文…

利用Base64加密算法将数据加密解密

1. Base64加密算法 Base64准确来说并不像是一种加密算法,而更像是一种编码标准。 我们知道现在最为流行的编码标准就是ASCLL,它用八个二进制位(一个char的大小)表示了127个字符,任何二进制序列都可以用这127个字符表…

逻辑 | 逻辑先修营

学习到更新日期逻辑先修营-3常见逻辑连词及逻辑表达2024-3-23 1.形式逻辑基础1 2.形式逻辑基础2 3.常见逻辑连词及逻辑表述 4.OR相关考点 5.AND相关考点 6.逻辑箭头基本考点1 7.逻辑箭头基本考点2 8.代入逻辑推理事实真1 9.代入逻辑推理事实真2 10.形式逻辑四大基本考点…

【Entity Framework】 EF中DbContext类详解

【Entity Framework】 EF中DbContext类详解 一、概述 DbContext类是实体框架的重要组成部分。它是应用域或实例类与数据库交互的桥梁。 从上图可以看出DbContext是负责与数据交互作为对象的主要类。DbContext负责以下活动: EntitySet:DbContext包含…

Web前端—事件循环

事件循环 事件循环浏览器的进程模型何为进程?何为线程?浏览器有哪些进程和线程? 渲染主线程是如何工作的?若干解释何为异步?面试题:如何理解JS的异步?JS会阻碍渲染任务有优先级吗?面…

宜搭低代码高级认证实操题2 faas连接器加密解密

密钥维护页-保证有一条数据 敏感信息提交页 存档页,只是用来存数据的审批的时候不用这个表提交数据不然会出两条 授权查看页 FaaS连接器先下载好他的示例代码然后按照要求配置好参数直接拷贝进去就行 然后需要在云开发环境里面先new一个terminal然后跑一下./builde…