1. 事件循环 (Event Loop)
js是单线程的;js任务是一个一个顺序执行;所有的任务队列可以分为同步任务和异步任务。同步任务会进入主线程中执行;异步任务回通过任务队列(Event Queue)的机制进行协调执行
- 同步代码,一行一行放在Call Stack 执行
- 遇到异步,会先“记录”下,等待时机(定时、网络请求等)
- 时机到了,就移动到Callback Queue
(1)DOM事件和event loop
- 异步( setTimeout , ajax 等)使用回调,基于event loop
- DOM事件也使用回调,基于event loop
(2)async/await
- Promise then catch链式调用,但也是基于回调函数
- async/await是同步语法,彻底消灭回调函数
(3)async/await和Promise的关系
- async/await是消灭异步回调的终极武器
- 执行async函数,返回的是Promise对象
- await 相当于Promise 的 then
- try…catch可捕获异常,代替了Promise 的catch
2.微任务(microTask)和宏任务(macroTask)
异步任务又分为 微任务和宏任务
- 宏任务: setTimeout , setInterval , Ajax,DOM事件 ,整体代码等
- 微任务: Promise async/await 等
- 微任务先于宏任务执行
(1)为什么微任务先执行?
- 微任务是ES6语法规定的
- 宏任务是由浏览器规定的,要经过webAPIs
3.常见面试题
(1)promise then和catch的连接
Promise.resolve().then((resolve)=>{
console.log(1); // 1
}).catch(()=>{
console.log(2);//不会打印这里
}).then(()=>{
console.log(3);//3
})
Promise.resolve().then(()=>{
console.log(1);// 1
throw new Error('error1')
}).catch(()=>{
console.log(2);// 2
}).then(()=>{
console.log(3);// 3
})
Promise.resolve().then(()=>{
console.log(1);// 1
throw new Error('error1')
}).catch(()=>{
console.log(2);// 2
}).catch(()=>{
console.log(3);// 此处不会打印
})
(2)async/await语法
async function fn(){
return 100;
}
(async function(){
const a = fn()
const b = await fn()
console.log(a);//Promise {<fulfilled>: 100} 返回promise对象
console.log(b);//100
})()
(async function(){
console.log('start');//start
const a = await 100;
console.log("a",a);//100
const b = await Promise.resolve(200);
console.log("b",b);//200
const c = await Promise.reject(300);
console.log("c",c);//不打印
console.log("end");//不打印
})()
(3)promise和setTimeout的顺序
console.log(100);
setTimeout(()=>{
console.log(200);
})
Promise.resolve().then(()=>{
console.log(300);
})
console.log(400);
//打印顺序 100-400-300-200
(4)外加 async/await 的顺序问题
async function async1(){
console.log('async1 start');//2
await async2()
console.log('async1 end')//6
}
async function async2(){
console.log('async2');//3
}
console.log('script start');//1
setTimeout(function(){
console.log('settimeout');//8
},0)
async1()
new Promise(function (resolve){
console.log('promise 1');//4
resolve()
}).then(function (){
console.log('promise 2');//7
})
console.log("script end");//5
出处:B站 https://www.bilibili.com/video/BV1Si4y1c7rh?spm_id_from=333.337.search-card.all.click