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对象抛出的异常
})