Promise面试题

 
 

前置知识

Promise中的then方法
then：指定用于得到成功value的成功回调和用于得到失败reason的失败回调，并且将放回一个新的Promise实例化对象
成功的状态：执行then方法的第一个回调函数 失败的状态：执行then方法的第二个回调函数

then方法的返回值是Promise实例化对象，其状态取决于回调函数的内容

• 如果返回的为非Promise实例化对象，则得到一个成功的Promise
• 如果返回的是Promise实例化对象，则Promise实例化对象的状态和结果值将直接影响result常量的状态和结果值
• 如果为抛出异常，则新的Promise实例化对象(result)为失败的Promise

JS中用来存储待执行回调函数的队列中包含了两个特定的队列
宏队列：用来保存执行的宏任务（回调），比如：定时器、DOM时间操作，ajax操作
微队列：用来保存执行的微任务（回调），比如：promise(then catch finally)
JS执行的时候会区分两个队列

1. 首先JS引擎会先将所有的同步代码都执行完
2. 接着在每次准备取出第一个宏任务的执行之前，都需要将所有的微任务一个一个取出来执行

• 顺序为：同步任务<–微任务<–宏任务

事件循环的执行顺序可以概括为以下几个步骤（以下答案来自ChatGPT）：

1. 执行同步任务（同步代码），直到执行栈为空。
2. 执行微任务队列中的所有微任务。微任务包括Promise的回调函数、MutationObserver的回调函数等。
3. 更新渲染（如果需要）。
4. 执行下一个宏任务。
   在上述步骤中，微任务队列的执行在渲染之前，也在下一个宏任务之前。这意味着微任务具有更高的优先级，可以在下一个宏任务之前立即执行。

面试题

面试题一

etTimeout(()=>{
	console.log(1);
 },0)
 Promise.resolve().then(()=>{
     console.log(2);
 })
 Promise.resolve().then(()=>{
     console.log(3);
 })
 console.log(4);

//答案：... 

 

面试题二

setTimeout(()=>{
    console.log(1);
})
new Promise(resolve=>{
    console.log(2);
    resolve()
}).then(()=>{
    console.log(3);
}).then(()=>{
    console.log(4);
})
console.log(5);
//答案：...

 

面试题三

const first = () => (new Promise((resolve,reject)=>{
    console.log(1);
    let p = new Promise((resolve,reject)=>{
        console.log(2);
        setTimeout(()=>{
            console.log(3);
            resolve(4)
        },0)
        resolve(5)
    })
    resolve(6)
    p.then(arg=>{
        console.log(arg);
    })
}))
first().then(arg=>{
    console.log(arg);
})
console.log(7);
//答案：...

 

面试题四

setTimeout(()=>{
     console.log(0);
 },0)
 new Promise((resolve,reject)=>{
     console.log(1);
     resolve();
 }).then(()=>{  //片段一
     console.log(2);
     new Promise((resolve,reject)=>{
         console.log(3);
         resolve();
     }).then(()=>{
         console.log(4);
     }).then(()=>{
         console.log(5);
     })
 }).then(()=>{  // 片段二
     console.log(6);
 })
 new Promise((resolve,reject)=>{
     console.log(7);
     resolve();
 }).then(()=>{  // 片段三
     console.log(8);
 })
 //答案：...

 

分析

面试题一分析

打印输出：4 2 3 1
分析：定时器为宏任务，加入宏任务队列；then方法为异步任务且为微任务，加入微任务队列；console.log打印输出为同步任务，直接打印输出4。由于微任务队列执行先于宏任务队列，因此先考虑2和3的打印输出，此处由入微任务队列先后顺序而定，先输出2，然后输出3，最后考虑输出宏任务队列的1，虽然其延迟时间为0。

• 同步任务：4
• 微任务：2 3
• 宏任务：1

 

面试题二分析

打印输出：2 5 3 4 1

分析：定时器为宏任务，加入宏任务队列；new Promise为同步任务，执行函数体内resolve方法，首先打印输出2，然后更改Promise实例对象状态为成功；then方法为异步任务，且为微任务，加入微任务队列；console.log打印处处为同步任务，直接打印输出5；因此首先，打印输出同步任务2和5，然后考虑微任务队列，两个then方法执行先后由队列中顺序而定，输出3和4，最后考虑宏任务队列，打印输出1。

• 同步任务：2 5
• 微任务：3 4
• 宏任务：1

 

面试题三分析

打印输出：1 2 7 5 6 3

分析：定义first函数为同步任务，执行其函数体，在new Promise的实例化方法中，首先执行同步输出1；定义p为一个Promise实例对象也为同步任务，执行函数体，首先打印输出2；定时器为宏任务，加入宏任务队列；执行resolve(5)，更改p的状态为成功；执行resolve(6)，更改外层Promise实例对象状态为成功；then方法为微任务，加入微任务队列；执行打印输出7。因此目前先执行同步任务，打印输出1、2和7，然后考虑微任务列队里执行先后，由于resolve(5)已更改p的状态为成功，因此首先输出arg:5，然后由于resolve(6)已更改外层Promise实例对象状态为成功，因此输出arg:6，因此目前执行微任务队列，打印输出5和6，最后考虑宏任务队列，打印输出3，但注意此时不会执行resolve(4)再去更改p的状态，因此状态已经由pending变为 resolved。

• 同步任务：1 2 7
• 微任务：5 6
• 宏任务：3

 

面试题四分析

打印输出：1 7 2 3 8 4 6 5 0

分析：定时器为宏任务，加入宏任务队列；执行new Promise同步任务，首先打印输出1，接着执行resolve更改其实例化对象的状态为成功；then方法为微任务，加入微任务队列；继续执行new Promise同步任务，首先打印输出7，接着执行resolve更改其实例化对象状态为成功；then方法为微任务，加入微任务队列。因此目前首先执行同步任务，输出1和7，然后考虑微任务队列里执行先后顺序，由于已更改第一个Promise实例对象状态为成功，因此执行其链式调用then方法的第一个回调函数，首先打印输出2，接着执行new Promise函数体，首先打印输出3(微任务里)，接着执行resolve，更改其实例化对象的状态为成功。由于then方法是异步的，当片段一(代码中已标出)代码没有执行完，片段二是不会执行的，转而会执行片段三，由于执行片段三前已执行resolve，其实例对象状态已变为成功，因此执行片段三的then方法中第一个回调，输出8，接着回到片段一里的第一个then方法，由于已经执行resolve，其实例对象状态已变为成功，因此执行then方法，输出4，此时若片段一中第一个then没有执行完，也不会接着链式执行第二个then。因此接着执行片段二，由于片段一的then方法没有return，因此执行完then的返回值为undefined，当返回值为非Promise对象：undefined时，则得到一个成功的Promise，且其[[PromiseResult]]为undefined，则可以执行then的第一个回调，输出6，同理回到片段一里的第二个then，输出5，最后执行宏队列任务，输出0
 
重难点：3之后输出8，4之后输出6，是因为then方法是异步的，前一个没有执行完，会接着往下走

• 同步任务：1 7
• 微任务：2 3 8 4 6 5
• 宏任务：0

then方法是异步执行，就是当【.then()】前的方法执行完后再执行【then()】内部的程序
这样就避免了数据没获取到等的问题，语法为【promise.then(onCompleted,onRejected)】。