1. Promise的三种状态
pending(过程中) 不会触发then和catch
resolved (成功了)会触发后续的then回调函数
rejected (被拒绝 失败了) 会触发后续的catch回调函数
2. then和catch改变状态
then 正常返回resolved ,里面有报则返回rejected
catch正常返回resolved,里面有报错则返回rejected
3. event loop(事件轮询/事件循环)
js是单线程运行的,异步要基于回调来实现
event loop就是异步回调的实现原理
event loop执行过程
同步代码 一行一行放在call stack执行
遇到异步,会先记录下 等待时机(定时,网络请求)
时机到了移动到 callback quene 中
如果 call stack为空(即同步代码执行完成) event loop 开始工作
轮询查找 callback quene 如有则移动到call stack执行
然后继续轮询查找(永动机)
4. async/await
async/await 是同步语法 ,消灭回调函数
和Promise的关系【非常重要】
执行async 函数 相当于返回的是一个Promise对象 await 相当于Promise的then
try catch 可以捕获异常。 相当于 相当于Promise的catch
(async function(){
const p4=Promise.reject('err1) //rejected 状态
try{
const res=await p4 //await -> then
console.log(res)
}catch(ex){ //catch 相当于Promise的catch
console.error(ex)
}
})
5. 宏任务/微任务(macroTask/microTask)
宏任务:setTimeOut setInterval Ajax DOM事件
微任务:Promise async/await
微任务执行时机比宏任务要早
两者区别 :
宏任务DOM渲染后触发,如setTimeOut
微任务DOM渲染前触发,如Promise
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/61891db813403046441525d66247ce37.png)
6. event loop 和DOM渲染关系
call stack清空(即每次轮询结束)即同步任务执行完
都是DOM重新渲染的机会,DOM 结构如有改变则重新渲染
然后再去触发一次event loop