JavaScript中的异步

JS如何执行？

• 从前到后，一行一行执行
• 如果某一行执行报错，则停止下面代码的执行
• 先把同步代码执行完，再执行异步

宏任务与微任务

event loop 浏览器

总结event loop过程

• 同步代码，一行一行的放在Call Stack执行
• 遇到异步，会先‘记录’下，等待时机（定时，网络请求等）
• 时机到了，就移动到Callback Queue
• 如果Call Stack为空（即同步代码执行完）Event Loop开始工作
• 轮询查找Callback Queue，如有则移动到Call Stack执行
• 然后继续轮询查找（永动机一样）

promise

• 三种状态，状态的表现和变化
  • promise有三种状态：fulfilled(已成功)/pending(进行中)/rejected(已拒绝) 。pending就是未决，fulfilled可以理解为成功，rejected可以理解为失败。
• then和catch对状态的影响（重要）
  • then正常返回 resolved,里面有报错则返回 rejected
  • catch正常返回 resolved,里面有报错则返回 rejected
• then和catch的链式调用（常考）

async/await和Promise的关系

• 执行async函数，返回的是Promise对象
• await相当于Promise的then
• try…catch可捕获异常，代替了Promise的catch

宏任务与微任务

• 宏任务：setTimeout，setInterval，Ajax，Dom
• 微任务：Promise，Async，Await
• 微任务执行时机比宏任务要早

微任务为什么比宏任务先执行

• 宏任务：DOM渲染后触发，如setTimeout，宏任务是有浏览器规定的。
• 微任务：DOM渲染前触发，如Promise，微任务是ECMAScript 规定的。

event loop和DOM渲染

• 再次回归一边event loop的过程
• JS是单线程的，而且和DOM渲染共用一个线程
• JS执行的时候，得留一些时机供DOM渲染