AJAX-综合

文章目录


同步代码和异步代码

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

回调函数地狱

概念:在回调函数中嵌套回调函数 ,一直嵌套下去就形成了回调函数地狱

缺点:可读性差,异常无法捕捉,耦合性严重,牵一发而动全身

解决回调函数地狱

Promise-链式调用

概念:依靠then()方法会返回一个新生成的Promise对象 特性,继续串联下一环任务,直到结束

细节:then()回调函数中的返回值 ,会影响新生成的Promise对象最终状态和结果

好处:通过链式调用,解决回调函数嵌套问题

async函数和await

async函数是AsyncFunction构造函数的实例,并且允许使用await关键字。aysnc和await关键字让我们用一种更简洁的方式写出基于Promise的异步代码,而无需刻意地链式调用Promise。

概念:在async函数内,使用await关键字取代then函数,等待 获取Promise对象成功状态的结果值

async函数和await-捕获错误

使用:try...catch

标记要尝试的语句块,并指定一个出现异常时抛出的响应。

语法:

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

事件循环

概念:JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。

原因:JavaScript单线程,为了让耗时代码不阻塞其他代码运行,设计了事件循环模型

定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行任务,就叫事件循环。

执行过程:

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

宏任务与微任务

异步任务分为:

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

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

执行过程:

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

Promise.all静态方法

概念:合并多个Promise对象,等待所有同时成功 完成(或某个失败),做后续逻辑

语法:

javascript 复制代码
const p = Promise.all([Promise对象,Promise对象,...])
p.then(result => {
	// result结果:[Promise对象成功结果,Promise对象成功结果,...]
}).catch(error =>{
	// 第一个失败的Promise对象抛出的异常
})
相关推荐
梦帮科技10 小时前
GRAVIS v4.0:基于Web的极速套利架构设计与实时数据流实现
前端·人工智能·rust·自动化·区块链·智能合约·数字货币
爱勇宝10 小时前
办公资料反复修改、补传、交接混乱,我做了个桌面工具来解决这件事
前端·后端·程序员
微信开发api-视频号协议11 小时前
企业微信外部群开发自动化实践过程
java·前端·微信·自动化·企业微信·ipad
甲维斯11 小时前
Fable5:20美金的顶级设计师!
前端·人工智能
kyriewen11 小时前
我同时用了 Claude Code、Cursor 和 Codex,说说三个工具的真实差距——2026 年选错工具比不用 AI 更浪费时间
前端·ai编程·claude
Jackson__12 小时前
为了拯救我的腰椎和颈椎,我做了款浏览器插件!
前端·javascript·开源
闲猫12 小时前
Python FastAPI + SQLAlchemy 入门教程:从零搭建你的第一个 Web 应用
前端·python·fastapi
林小帅12 小时前
NestJS v11 + Prisma v7 ESM 迁移配置解析
前端·javascript·后端
IT_陈寒12 小时前
React的setState竟然不是立刻生效的,害我调试半天
前端·人工智能·后端
简简单单就是我_hehe12 小时前
前端埋点日志解决方案:完整 User-Agent 解析工具实现,爬虫识别、设备品牌、操作系统、浏览器版本全解析(附完整源码)
前端·爬虫