AJAX-综合

news/2024/4/29 6:53:36/文章来源:https://blog.csdn.net/jl_3288/article/details/136965520

文章目录

    • 同步代码和异步代码
    • 回调函数地狱
    • 解决回调函数地狱
      • 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.luyixian.cn/news_show_1028089.aspx

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

相关文章

后端常问面经之计算机网络

一台机器理论上能创建多少条TCP连接? Linux每维护一条TCP连接都要花费内存资源的,每一条静止状态(不发送数据和不接收数据)的 TCP 连接大约需要吃 3.44K 的内存,那么 8 GB 物理内存的服务器,最大能支持的 …

微服务day07 -- 搜索引擎 ( 数据聚合 + 自动补全 + 数据同步 + ES集群 )

1.数据聚合 聚合(aggregations)可以让我们极其方便的实现对数据的统计、分析、运算。例如: 什么品牌的手机最受欢迎? 这些手机的平均价格、最高价格、最低价格? 这些手机每月的销售情况如何? 实现这些…

R语言基础入门

1.保存或加载工作空间 改变工作目录——进行文件读写,默认去指定文件进行操作。(使用R时,最好先设定工作目录(setwd(),getwd())) setwd(“工作文件路径”):建立工作目录 getwd(&…

OpenGL 实现“人像背景虚化“效果

手机上的人像模式,也被人们称作“背景虚化”或 ”双摄虚化“ 模式,也称为 Bokeh 模式,能够在保持画面中指定的人或物体清晰的同时,将其他的背景模糊掉。突出画面的主体部分,主观上美感更强烈。 人像模式的一般实现原理是,利用双摄系统获取景深信息,并通过深度传感器和图…

C语言与sqlite3入门

c语言与sqlite3入门 1 sqlite3数据类型2 sqlite3指令3 sqlite3的sql语法3.1 创建表create3.2 删除表drop3.3 插入数据insert into3.4 查询select from3.5 where子句3.6 修改数据update3.7 删除数据delete3.8 排序Order By3.9 分组GROUP BY3.10 约束 4 c语言执行sqlite34.1 下载…

计算机毕业设计Hadoop+Spark+Hive租房推荐系统 贝壳租房数据分析 租房爬虫 租房可视化 租房大数据 大数据毕业设计 大数据毕设 机器学习

毕业技术方向调查表 姓名: 李昌福 课题方向 房无忧房屋租赁平台 开发语言: Java 前端框架: VUE 数据库: MySQL 服务器端 框架: SpringCloud 其他技术: Hadoop、HDFS 方向…

HTML网站的概念

目录 前言: 1.什么是网页: 2.什么是网站: 示例: 3.服务器: 总结: 前言: HTML也称Hyper Text Markup Language,意思是超文本标记语言,同时HTML也是前端的基础&…

二叉树初阶数据结构C

文章目录 一、树的概念及结构?1.树的概念2.树的相关概念3.树的表示4.树在实际生活的应用(表示文件系统的目录树结构) 二、二叉树的概念及结构1.概念2.特殊的二叉树3.二叉树的性质4.二叉树的存储结构 三、二叉树链式结构的实现(顺序结构之前讲…

maven 依赖机制

安全工程师为啥关注maven依赖 log 4j事件之后,大家开始更加关注开源组件安全漏洞这个事。纷纷引入SCA 软件成分分析工具来识别项目中存在的开源组件和漏洞。 在sca工具扫描之后,会报出一大堆组件,review这个事就是安全团队投入时间来研判了…

解锁未知领域:探索Web3技术的无限可能性

随着数字化时代的持续发展,Web3技术作为下一代互联网的重要组成部分,正呈现出无限的创新可能性。本文将深入探索Web3技术所带来的无限可能性,揭示其在各个领域的应用前景和潜力。 1. 区块链技术的革命性 Web3的核心是区块链技术,…

C++商品库存管理系统

第一章 需求分析 1.1程序设计任务 1.1.1总体要求 运用面向对象程序设计知识,利用C语言设计和实现一个“库存管理系统设计”,主要完成对商品的销售、统计和简单管理。在实现过程中,需利用面向对象程序设计理论的基础知识,充分体现…

Webpack常见插件和模式

目录 目录 目录认识 PluginCleanWebpackPluginHtmlWebpackPlugin自定义模版 DefinePlugin的介绍 ( 持续更新 )Mode 配置 认识 Plugin Loader是用于特定的模块类型进行转换; Plugin可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等 …

【zlm】问题记录:chrome更新引起的拉不出webrtc; 证书校验引起的放几秒中断

目录 chrome更新引起的拉不出webrtc 证书校验引起的放几秒中断 chrome更新引起的拉不出webrtc 【zlm】最新的chrome版本中的报错: 我有个问题event.js:8 [RTCPusherPlayer] DOMException: Failed to execute setRemoteDescription on RTCPeerConnection: Failed …

Java前端控制器模式

文章目录 以下是Java前端控制器模式的主要组成部分和工作原理:组件与角色:工作流程:应用场景与优势: Java Web应用程序示例 Java前端控制器模式是一种软件设计模式,它在构建基于Java的Web应用程序时特别有用&#xff0…

如何使用 ArcGIS Pro 制作三维建筑

三维地图已经逐渐成为未来地图的趋势,对于大范围应用,只需要普通的建筑体块就行,如果有高程数据,还可以结合地形进行显示,这里为大家介绍一下 ArcGIS Pro 制作三维建筑的方法,希望能对你有所帮助。 数据来…

使用seldom编写http接口用例

在编写接口用例的过程中,针对一个接口,往往只是参数不同,那么参数化就非常有必要了。 seldom 中参数化的用法非常灵活,这里仅介绍file_data() 的N种玩法。 二维列表 当参数比较简单时可以试试下面的方式。 参数化数据 {"…

老阳推荐的视频号项目是真的吗?能赚钱吗?

在当下数字化、信息化的社会背景下,视频号项目如雨后春笋般涌现,成为许多人关注的焦点。特别是在一些知名人士,如老阳的推荐下,这些项目更是受到了广泛的关注和讨论。那么,老阳推荐的视频号项目是否真实存在?它能否真…

uni-app(使用阿里图标)

1.注册阿里矢量图标库 注册阿里图标库账号并登录,https://www.iconfont.cn/ 2.加入购物车 搜索适合自己的图标,加入购物车,如下图: 3.加入项目 我的->资源管理->我的项目->创建项目,然后返回购物车&#…

cesium vue 绘制标记实体(撒点),监听鼠标左击事件

添加实体 const viewer new Cesium.Viewer(cesiumContainer, {})viewer.entities.add()查看实体 const viewer new Cesium.Viewer(cesiumContainer, {}) const billboard viewer.entities.add({...})viewer.zoomTo(billboard)删除实体 根据实体删除 if (billboard.value…

快速上手Spring Cloud 六:容器化与微服务化

快速上手Spring Cloud 一:Spring Cloud 简介 快速上手Spring Cloud 二:核心组件解析 快速上手Spring Cloud 三:API网关深入探索与实战应用 快速上手Spring Cloud 四:微服务治理与安全 快速上手Spring Cloud 五:Spring …