JS——Promise题目

了解event loop

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

微任务包括：MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。
宏任务包括：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering。

注意： 在所有任务开始的时候，由于宏任务中包括了script，所以浏览器会先执行一个宏任务，在这个过程中你看到的延迟任务(例如setTimeout)将被放到下一轮宏任务中来执行。

执行顺序最主要的是抓住宏任务和微任务的执行顺序。

1、Promise基础题

1.1 题目一

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

结果：
1 2 4 3

过程分析：

• 从上至下，先遇到new Promise，执行其中的同步代码1
• 再遇到resolve(‘success’)， 将promise的状态改为了fulfilled并且将值保存下来
• 继续执行同步代码2
• 跳出promise，往下执行，碰到promise.then这个微任务，将其加入微任务队列
• 执行同步代码4
• 本轮宏任务全部执行完毕，检查微任务队列，发现promise.then这个微任务且状态为resolved，执行它。

1.2 题目二

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)

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

过程分析：

• 从上至下，先遇到new Promise，执行该构造函数中的代码promise1
• 碰到resolve函数, 将promise1的状态改变为fulfilled, 并将结果保存下来
• 碰到promise1.then这个微任务，将它放入微任务队列
• promise2是一个新的状态为pending的Promise
• 执行同步代码1， 同时打印出promise1的状态是fulfilled
• 执行同步代码2，同时打印出promise2的状态是pending
• 宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为fulfilled，执行它。

1.3 题目三

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

结果：
1
start
success

过程分析：

• fn()是直接返回了一个new Promise的，而且fn函数的调用是在start之前，所以它里面的内容应该会先执行。
• 执行同步代码1
• 碰到resolve函数，将fn()的状态改变为fulfilled，并将结果保存下来
• 碰到fn().then这个微任务，将它放入微任务队列
• 执行同步代码start
• 宏任务执行完毕，查找微任务队列，发现fn().then这个微任务且状态为fulfilled，执行它。

2、Promise结合setTimeout

2.1 题目一

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

结果：
start
end
resolve
time

过程分析：

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

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
4
timeStart
timerEnd
success

过程分析：

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

2.3 题目三

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

结果：
start
promise1
timer1
promise2
timer2

2.4 题目四

const promise1 = new Promise((resolve, reject) => {
   
  setTimeout(() => {
   
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
   
  throw new Error('error!!!')
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
   
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

结果：
promise1 Promise{<pending>}
promise2 Promise{<pending>}
Error: error!!!
promise1 Promise{<fulfilled>: "success"}
promise2 Promise{<rejected>: Error: error!!!}

3、Promise中的then、catch、finally

总结：

1. Promise的状态一经改变就不能再改变。
2. catch不管被连接到哪里，都能捕获上层未捕捉过的错误。
3. Promise 的 .then 或者 .catch 可以被调用多次, 但如果Promise内部的状态一经改变，并且有了一个值，那么后续每次调用.then或者.catch的时候都会直接拿到该值。
4. .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。
5. .then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。
6. .then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。
7. .then方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为catch是.then第二个参数的简便写法。
8. .finally方法也是返回一个Promise，他在Promise结束的时候，无论结果为resolved还是rejected，都会执行里面的回调函数。

3.1 题目一

const promise = new Promise((resolve, reject) => {
   
  resolve("success1")
  reject("error")
  resolve("success2")
})
promise.then(res => {
   
  console.log("then: ", res)
}).catch(err => {
   
  console.log("catch: ", err)
})

结果：
then: success1

构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用 。
Promise的状态一经改变就不能再改变。

3.2 题目二

const promise = new Promise((resolve, reject) => {
   
  reject("error")
  resolve("success2")
})
promise.then(res =>