event loop它的执行顺序：

一开始整个脚本作为一个宏任务执行
执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
执行浏览器UI线程的渲染工作
检查是否有Web Worker任务，有则执行
执行完本轮的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空

微任务包括：MutationObserver、Promise.then()或reject()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。

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

# 1 Promise的几道基础题

# 1.1 题目一

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

@前端进阶之旅: 代码已经复制到剪贴板

从上至下，先遇到new 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的状态改为了resolved并且将值保存下来
继续执行同步代码2
跳出promise，往下执行，碰到promise.then这个微任务，将其加入微任务队列
执行同步代码4
本轮宏任务全部执行完毕，检查微任务队列，发现promise.then这个微任务且状态为resolved，执行它。

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);

@前端进阶之旅: 代码已经复制到剪贴板

和题目二相似，只不过在promise中并没有resolve或者reject
因此promise.then并不会执行，它只有在被改变了状态之后才会执行。

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
碰到resolve函数, 将promise1的状态改变为resolved, 并将结果保存下来
碰到promise1.then这个微任务，将它放入微任务队列
promise2是一个新的状态为pending的Promise`
执行同步代码1，同时打印出promise1的状态是resolved
执行同步代码2，同时打印出promise2的状态是pending
宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为resolved，执行它。

'promise1'
'1' Promise{<resolved>: '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函数它是直接返回了一个new Promise的，而且fn函数的调用是在start之前，所以它里面的内容应该会先执行。

1
'start'
'success'

@前端进阶之旅: 代码已经复制到剪贴板

# 1.6 题目六

如果把fn的调用放到start之后呢？

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

@前端进阶之旅: 代码已经复制到剪贴板

现在start就在1之前打印出来了，因为fn函数是之后执行的。

注意⚠️：之前我们很容易就以为看到new Promise()就执行它的第一个参数函数了，其实这是不对的，就像这两道题中，我们得注意它是不是被包裹在函数当中，如果是的话，只有在函数调用的时候才会执行。

"start"
1
"success"

@前端进阶之旅: 代码已经复制到剪贴板

# 2. Promise结合setTimeout

# 2.1 题目一

console.log('start')
setTimeout(() => {
  console.log('time')
})
Promise.resolve().then(() => {
  console.log('resolve')
})
console.log('end')

@前端进阶之旅: 代码已经复制到剪贴板

刚开始整个脚本作为一个宏任务来执行，对于同步代码直接压入执行栈进行执行，因此先打印出start和end。
setTimout作为一个宏任务被放入宏任务队列(下一个)
Promise.then作为一个微任务被放入微任务队列
本次宏任务执行完，检查微任务，发现Promise.then，执行它
接下来进入下一个宏任务，发现setTimeout，执行。

'start'
'end'
'resolve'
'time'

@前端进阶之旅: 代码已经复制到剪贴板

# 2.2 题目二

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(4);

@前端进阶之旅: 代码已经复制到剪贴板

和题目1.2很像，不过在resolve的外层加了一层setTimeout定时器。

从上至下，先遇到new Promise，执行该构造函数中的代码1
然后碰到了定时器，将这个定时器中的函数放到下一个宏任务的延迟队列中等待执行执行同步代码2
跳出promise函数，遇到promise.then，但其状态还是为pending，这里理解为先不执行执行同步代码4
一轮循环过后，进入第二次宏任务，发现延迟队列中有setTimeout定时器，执行它
首先执行timerStart，然后遇到了resolve，将promise的状态改为resolved且保存结果并将之前的promise.then推入微任务队列
继续执行同步代码timerEnd
宏任务全部执行完毕，查找微任务队列，发现promise.then这个微任务，执行它

1
2
4
"timerStart"
"timerEnd"
"success"

@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 题目三

题目三分了两个题目，因为看着都差不多，不过执行的结果却不一样，大家不妨先猜猜下面两个题目分别执行什么：

setTimeout(() => {
  console.log('timer1');
  setTimeout(() => {
    console.log('timer3')
  }, 0)
}, 0)
setTimeout(() => {
  console.log('timer2')
}, 0)
console.log('start')

@前端进阶之旅: 代码已经复制到剪贴板

'start'
'timer1'
'timer2'
'timer3'

@前端进阶之旅: 代码已经复制到剪贴板

setTimeout(() => {
  console.log('timer1');
  Promise.resolve().then(() => {
    console.log('promise')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
}, 0)
console.log('start')

@前端进阶之旅: 代码已经复制到剪贴板

'start'
'timer1'
'promise'
'timer2'

@前端进阶之旅: 代码已经复制到剪贴板

这两个例子，看着好像只是把第一个定时器中的内容换了一下而已。
一个是为定时器timer3，一个是为Promise.then
但是如果是定时器timer3的话，它会在timer2后执行，而Promise.then却是在timer2之前执行。
你可以这样理解，Promise.then是微任务，它会被加入到本轮中的微任务列表，而定时器timer3是宏任务，它会被加入到下一轮的宏任务中。
理解完这两个案例，可以来看看下面一道比较难的题目了

# 2.4 题目三

Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
console.log('start');

@前端进阶之旅: 代码已经复制到剪贴板

这道题稍微的难一些，在promise中执行定时器，又在定时器中执行promise；
并且要注意的是，这里的Promise是直接resolve的，而之前的new Promise不一样。

因此过程分析为

'start'
'promise1'
'timer1'
'promise2'
'timer2'

# 1 Promise的几道基础题

# 1.1 题目一

# 1.2 题目二

# 1.3 题目三

# 1.4 题目四

# 1.5 题目五

# 1.6 题目六

# 2. Promise结合setTimeout

# 2.1 题目一

# 2.2 题目二

# 2.3 题目三

# 2.4 题目三

# 2.5 题目四

# 2.6 题目五

# 3. Promise中的then、catch、finally

Promise面试题详解与常见考点

Promise面试题详解与常见考点