哔哩哔哩：JS 异步笔试题

其中，关于时间差结果可能因为计算机性能造成的微小差异，可忽略不计

你答对了吗？下面我们由浅入深探索本题

由浅入深探索 Promise 异步执行

======================================================================================

首先，看一下 event loop 的基础必备内容

event loop 执行顺序：

首先执行 script 宏任务 执行同步任务，遇见微任务进入微任务队列，遇见宏任务进入宏任务队列

执行完当前宏任务所产生的微任务队列，有则依次执行，直到全部执行完，

执行浏览器 UI 线程的渲染工作 检查是否有WebWorker任务，有则执行

执行下一个宏任务，回到第二步，依此循环，直到宏任务和微任务队列都为空

微任务包括：MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick 、 Object.observe（已废弃；Proxy 对象替代）

宏任务包括：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering 、 postMessage 、 MessageChannel

注意： 下面的题目都是执行在浏览器环境下

遇到不好理解的，可结合 【我文章里面的 promise原理实现】 进行理解，就很简单了

练习

=====================================================================

1. 同步 + Promise

---

题目一：

var promise = new Promise((resolve, reject) => {

console.log(1)

resolve()

console.log(2)

})

promise.then(()=>{

console.log(3)

})

console.log(4)

// 1

// 2

// 4

// 3

首先明确， Promise 构造函数是同步执行的， then 方法是异步执行的

开始 new Promise ，执行构造函数同步代码，输出 1

再 resolve()， 将 promise 的状态改为了 resolved ，并且将 resolve 值保存下来，此处没有传值

执行构造函数同步代码，输出 2

跳出promise，往下执行，碰到 promise.then 这个微任务，将其加入微任务队列

执行同步代码，输出 4

此时宏任务执行完毕，开始检查微任务队列，执行 promise.then 微任务，输出 3

题目二：

var promise = new Promise((resolve, reject) => {

console.log(1)

})

promise.then(()=>{

console.log(2)

})

console.log(3)

// 1

// 3

开始 new Promise ，执行构造函数同步代码，输出 1

再 promise.then ，因为 promise中并没有resolve ，所以 then 方法不会执行

执行同步代码，输出 3

题目三：

var promise = new Promise((resolve, reject) => {

console.log(1)

})

promise.then(console.log(2))

console.log(3)

// 1

// 2

// 3

首先明确， .then 或者 .catch 的参数期望是函数，传入非函数则会发生（ value => value ）

开始 new Promise ，执行构造函数同步代码，输出 1

然后 then() 的参数是一个 console.log(2) （注意：并不是一个函数），是立即执行的，输出 2

执行同步代码，输出 3

题目四：

Promise.resolve(1)

.then(2)

.then(Promise.resolve(3))

.then(console.log)

// 1

then(2) 、 then(Promise.resolve(3)) 发生了值穿透，直接执行最后一个 then ，输出 1

题目五：

var promise = new Promise((resolve, reject) => {

console.log(1)

resolve()

reject()

})

promise.then(()=>{

console.log(2)

}).catch(()=>{

console.log(3)

})

console.log(4)

// 1

// 4

// 2

开始 new Promise ，执行构造函数同步代码，输出 1

再 resolve()， 将 promise 的状态改为了 resolved ，并且将 resolve 值保存下来，此处没有传值

再 reject() ，此时 promise 的状态已经改为了 resolved ，不能再重新翻转（状态转变只能是pending —> resolved 或者 pending —> rejected，状态转变不可逆）

跳出promise，往下执行，碰到 promise.then 这个微任务，将其加入微任务队列

往下执行，碰到 promise.catch 这个微任务，此时 promise 的状态为 resolved （非 rejected ），忽略 catch 方法

执行同步代码，输出 4

此时宏任务执行完毕，开始检查微任务队列，执行 promise.then 微任务，输出 2

题目六：

Promise.resolve(1)

.then(res => {

console.log(res);

return 2;

})

.catch(err => {

return 3;

})

.then(res => {

console.log(res);

});

// 1

// 2

首先 resolve(1)， 状态改为了 resolved ，并且将 resolve 值保存下来

执行 console.log(res) 输出 1

返回 return 2 实际上是包装成了 resolve(2)

状态为 resolved ， catch 方法被忽略

最后 then ，输出 2

2. 同步 + Promise + setTimeout

---

题目一：

setTimeout(() => {

console.log(1)

})

Promise.resolve().then(() => {

console.log(2)

})

console.log(3)

// 3

// 2

// 1

首先 setTimout 被放入宏任务队列

再 Promise.resolve().then ， then 方法被放入微任务队列

执行同步代码，输出 3

此时宏任务执行完毕，开始检查微任务队列，执行 then 微任务，输出 2

微任务队列执行完毕，检查执行一个宏任务

发现 setTimeout 宏任务，执行输出 1

题目二：

var promise = new Promise((resolve, reject) => {

console.log(1)

setTimeout(() => {

console.log(2)

resolve()

}, 1000)

})

promise.then(() => {

console.log(3)

})

promise.then(() => {

console.log(4)

})

console.log(5)

// 1

// 5

// 2

// 3

// 4

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。