JavaScript异步相关面试题

Posted 2021-12-28 精通各种hello world的小希

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript异步相关面试题相关的知识，希望对你有一定的参考价值。

异步的话讲到这里算是大结局了，这篇文章是针对已经学完前面几个系列的异步知识的朋友并且希望可以检验一下学习成果或者正在求职的朋友。

不过还有一个常考的知识点没讲，因为下面检验大家异步的学习情况会用到，所以还是简单给大家讲一下！

宏任务和微任务

我们先看看一组代码

console.log(100);  //1
setTimeout(() =>
     console.log(200);//4
)
Promise.resolve().then(() =>
     console.log(300)//3
)
console.log(400);//2

1、2步执行结果大家应该都没有问题了，3、4的执行结果就是宏任务和微任务的区别

在这里就不详细讲了，已经学废的老油条就记住以下几点，未接触过的萌新小白就要去了解下宏任务和微任务的概念和区别再回来看看！

重点笔记：

1.宏任务有：setTimeout、setInterval、Ajax、Dom等（由浏览器规定）

2.微任务有:Promise、async-await等（由ES6语法规定）

3.先执行微任务，再执行宏任务。

4.微任务执行在DOM渲染前，宏任务执行在DOM渲染后

概念题

一、描述event loop 机制（可以画图）

二、Promise的三种状态有什么，是如何变化的？

三、宏任务有哪些？微任务有哪些？

场景题

注意：先自己思考，做完再看答案，答案都在所有题目的后面！

A类：Promise 与 then 和 catch相关面试题

第一题：控制台打印？

 Promise.resolve().then(()=>
     console.log('a')
 ).catch(()=>
     console.log('b')
 ).then(()=>
     console.log('c')
 )

第二题：控制台打印？

 Promise.resolve().then(()=>
     console.log('a')
     throw new Error('err1')
 ).catch(()=>
     console.log('b')
 ).then(()=>
     console.log('c')
 )

第三题：控制台打印？

Promise.resolve().then(()=>
    console.log('a')
    throw new Error('err1')
 ).catch(()=>
     console.log('b')
 ).catch(()=>
     console.log('c')
 )

B类：async/await相关面试题

第四题：控制台打印？

async function fn()
    return 100

(async function()
    const a = fn();
    const b = await fn(); 
    console.log(a);
    console.log(b);
)()

第五题：控制台打印？

(async function()
    console.log('go')
    await fn()
    const a = await 100;
    console.log(a);
    const b = await Promise.resolve(200)
    console.log(b)
    const c = await Promise.reject(300)
    console.log(c)
    console.log('end');
)()
function fn()
    console.log(666)

console.log(777);

C类：综合考察（大boss题）

async function async1()
    console.log('A');
    await async2()
    console.log('B')
 

async function async2()
    console.log('C')
 
  
console.log('D')

setTimeout(()=>
    console.log('E')
,0)

async1();

new Promise(function(resolve)
    console.log('F');
    resolve()
).then(function()
    console.log('G')
)

console.log('H')