AJAX-同步/异步,回调函数/ Promise 链式调用/async await /事件循环-EventLoop/Promise.all

173 阅读2分钟

一.同步代码和异步代码

同步代码:逐行执行,需原地等待结果后,才继续向下执行

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

1.png

二.回调函数地狱和 Promise 链式调用

1.回调函数地狱

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

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

2.png

2.Promise - 链式调用

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

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

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

3.png

三.async 和 await 使用

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

4.png

5.png

四.事件循环-EventLoop

原因:JavaScript 单线程(某一刻只能执行一行代码),为了让耗时代码不阻塞其他代码运行,设计了事件循环模型

事件循环 - 执行过程

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

6.png

宏任务与微任务

异步任务分为:

✓ 宏任务:由浏览器环境执行的异步代码

✓ 微任务:由 JS 引擎环境执行的异步代码

任务(代码) 执行所在环境

JS脚本执行事件(script) 浏览器

setTimeout/setInterval 浏览器

AJAX请求完成事件 浏览器

用户交互事件等 浏览器

Promise对象.then() JS 引擎(Promise 本身是同步的,而then和catch回调函数是异步的)

7.png

五.Promise.all 静态方法

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

8.png