持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

接下来就整点关于Promise的面试题目吧，一起把这些题目参悟了

在参悟以下这些面试题之前，我们还需要有点准备工作

• Promise的基本使用，then，catch，finally方法
• 事件循环（Event Loop）的执行顺序

如果以上几点你觉得自己可以，那就开始往下走吧！先来第一关

第一关

1.1

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
})
console.log('1', promise1);

过程分析：

• 首先遇见new Promise，之前介绍过Promise一旦创建就会执行，所以执行构造函数中的promise1
• 之后遇见同步代码1，此时promise1没有被resolve或者reject回调函数执行，所以状态还是pending

结果：

promise1
1 Promise {<pending>}

1.2

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

过程分析：

• 首先遇见new Promise，执行里面的同步代码1
• 接着遇见resolve('success')，将promise的状态从pending变成resolved
• 最后遇见同步任务2
• 往下遇见promise.then是个微任务，加入到微任务列表
• 整段代码最后遇见同步代码4
• 检查微任务列表执行微任务3 结果：

1
2
4
3

1.3

const promise = new Promise((resolve, reject) => {
  console.log(1);
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

过程分析：

• 首先遇见new Promise开始执行，遇见同步代码1和2
• 往下遇见promise.then，因为在promise中没有resolve或者reject，所以promise并不会执行
• 最后执行同步代码4 结果：

1 2 4

1.4

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

执行过程：

• 首先遇见new Promise开始执行，里面遇见同步代码promise1
• 遇见resole('resolve1')，将promise状态变为resolved
• 遇见promise1.then()加入微任务列表
• 执行同步代码1,promise1，打印promise1的状态是resolved
• 执行同步代码2,promise2，打印promise2的状态是pending
• script宏任务执行完毕，开始查找微任务列表，发现promise.then这个微任务，开始执行，返回resolve1 结果：

promise1
1 Promise {<fulfilled>: "resolve1"}
2 Promise {<pending>}
resolve1

1.5

const fn = () => (new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
}))
fn().then(res => {
  console.log(res)
})
console.log('start')

执行过程：

• 仔细读代码，返现函数fn将Promise返回出去，而且函数fn是在最上面的，首先执行new Promise里面的代码
• 执行同步代码1
• resolve('success')将promise的状态变为resolved
• fn().then微任务加入微任务列表
• 执行宏任务中的同步代码start 结果：

1
start
success

1.6

const fn = () =>
  new Promise((resolve, reject) => {
    console.log(1);
    resolve("success");
  });
console.log("start");
fn().then(res => {
  console.log(res);
});

注意⚠️：这里的函数new Promise是没有包裹在函数fn中的

执行过程：

• 首先遇见new Promise发现它并没有被包裹在fn里面，立即执行。
• 将new Promise加入微任务列表
• 遇见同步代码start
• 此时fn().then并没有resolve或者reject，所以不执行
• 查找宏任务没有，执行微任务new Promise，执行同步代码1，之后将状态resolved
• 将fn().then()加入微任务列表，event loop之后执行fn().then()输出success。 结果：

start
1
success

第一关有没有掉队的，有掉队的就仔细看看执行过程，多看看事件循环。没掉对的，咱们第二关见~