2021年前端基础面试题 8 异步编程

1. event loop 画图说明

• JS 是单线程运行
• 异步是基于回调来实现
• event loop 就是异步回调的实现原理

Call Stack 同步代码

代码执行时放入Call Stack 执行完成后移出

Web APIs 浏览器的接口

setTimeout()是web Api的定时器方法，不是es6的语言
执行setTimeout时，将它放入Web APIs里面等待5秒，后面到第5秒出发时会放入Callback Queue

接下来执行第三行代码打印Bye，同样也是执行时放入Call Stack 执行后移出Call Stack，这时整个代码同步的部分都已经执行完了。

Event Loop 事件轮询

5秒后 Web APIs里面的回调函数被触发，将cb方法放入了 CallBack Queque队列中

Event Loop 轮询CallBack Queue 发现有cb() 则放入Call Stack中执行并移出

cb()方法中有console.log() 则先执行console.log 然后执行完移出，最终再把cb()移出

Promise相关

promise的三种状态

resolved只能触发then,reject只能触发catch,例如下面的代码

Promise.resolve(100).then(data=>{
    console.log(data) // 100
})

catch 中如果正常返回，则后续状态为resolved,否则为rejected

面试题：then和catch的链式调用

Promise.resolve().then(()=>{
    console.log(1) // 1 
    throw new Error('err') // then里面有报错会触发后续的catch
}).catch(()=>{
    console.log(2) // 2 // catch中没有报错会触发后续的then
}).then(()=>{
    console.log(3) // 3
})

async/await

!(async  function (){
await  1
})()

async 返回Promise
await 等于promise的then
await 200 等于 await Promise.resolve(200)

宏任务和微任务

宏任务：settimeout ajax dom事件
微任务：promise await
宏任务在dom渲染后执行，微任务反之
微任务是es6语法 不会放到webapi区域，所以先执行