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

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

相关文章

【Java核心能力】了解 Redis 的 IO 多路复用吗?

欢迎关注公众号(通过文章导读关注:【11来了】),及时收到 AI 前沿项目工具及新技术的推送! 在我后台回复 「资料」 可领取编程高频电子书! 在我后台回复「面试」可领取硬核面试笔记! 文章导读地址…

蓝桥杯小白月赛3.23

题目描述&#xff1a; AC代码&#xff1a; #include <iostream> #include<cstring> #include<algorithm>using namespace std;const int N 2e510; string str[N]; //写上&会速度更快一些 bool cmp(const string &s1,const string &s2) {//例…

VMware扩容硬盘

最近研究Oracle的备份导入导出功能&#xff0c;但是因为磁盘容量不够导致表空间的扩容没办法&#xff0c;从而没办法导入数据库的dmp文件。得想办法先扩容磁盘容量。话不多说上截图操作。 操作环境&#xff1a;VMware10 , Centos 6.9 VMware扩容硬盘步骤 一、关闭虚拟机&…

大学教材《C语言程序设计》(浙大版)课后习题解析 | 第三、四章

概述 本文主要提供《C语言程序设计》(浙大版) 第三、四章的课后习题解析&#xff0c;以方便同学们完成题目后作为参考对照。后续将更新第五、六章节课后习题解析&#xff0c;如想了解更多&#xff0c;请持续关注该专栏。 专栏直达链接&#xff1a;《C语言程序设计》(浙大版)_孟…

考研数学|《1800》《1000》《880》《660》最佳搭配使用方法

直接说结论&#xff1a;基础不好先做1800、强化之前660&#xff0c;强化可选880/1000题。 首先&#xff0c;传统习题册存在的一个问题是题量较大&#xff0c;但难度波动较大。《汤家凤1800》和《张宇1000》题量庞大&#xff0c;但有些题目难度不够平衡&#xff0c;有些过于简单…

带你学会深度学习之优化算法 - 1

前言 笔者写下此系列文章是希望在复习人工智能相关知识同时为想学此技术的人提供一定帮助。 图源网络&#xff0c;所有者可随时联系笔者删除。 在一个深度学习问题中&#xff0c;我们通常会预先定义一个损失函数。有了损失函数以后&#xff0c;我们就可以使用优化算法试图将其…

电脑上的几篇文章急需注音怎么办?一键批量注音的办法

在现代教育中&#xff0c;汉字注音是一项重要的任务。无论是为了帮助学生更好地学习汉字&#xff0c;还是为了制作教学材料&#xff0c;批量注音都是不可或缺的一步。然而&#xff0c;手动为每一个汉字注音是一项繁琐且耗时的任务。因此&#xff0c;掌握批量注音的方法显得尤为…

[计算机效率] 文件同步工具:FreeFileSync

3.8 文件同步工具&#xff1a;FreeFileSync 非常有用的一款免费文件同步软件。如果两处各自有一个相同的文件夹&#xff0c;但是里面的文件有一些不同。比如&#xff0c;一个是U盘里的&#xff0c;一个是本地电脑磁盘里的文件夹。这样&#xff0c;本地电脑磁盘里的文件夹内容由…

Linux 设备树: of_property_match_string 的用法与工作原理

前言 当前新版本的 Linux 内核 设备驱动框架&#xff0c;与设备树&#xff08;Device Tree&#xff09;结合密切&#xff0c;整体 设备树的设备驱动框架&#xff0c;比较的庞大&#xff0c;但又非常的经典。 一个个的 设备树解析函数&#xff0c;都是前人【智慧】的结晶&#…

【Linux实践室】Linux用户管理实战指南:用户密码管理操作详解

&#x1f308;个人主页&#xff1a;聆风吟_ &#x1f525;系列专栏&#xff1a;Linux实践室、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️任务描述二. ⛳️相关知识2.1 &#x1f514;用户密码存放地及方式2.2 &#x1f514;使用…

Windows上实现iOS APP自动化测试:tidevice + WDA + airtest!

环境准备 本文使用的环境如下&#xff1a; Python 3.7.6&#xff0c;Python版本需要3.6 tidevice0.4.14 WebDriverAgent airtest1.2.2 iOS 设备&#xff1a;iPhone12 Windows系统版本&#xff1a;Windows 10 家庭中文版 使用USB连接设备&#xff0c;检测tidevice是否安…

vue项目使用eletron将打包成桌面应用(.exe)

vue项目使用eletron将打包成桌面应用(.exe) 1.前期准备 两个项目&#xff1a; 1、自己用vue cli创建的项目 2、第二个是去gitee将案例clone下来 案例地址 https://gitee.com/qingplus/electron-quick-start.git 2、测试案例是否可以正常运行 # 进入项目 cd electron-quick-…