大厂经常会围绕Promise 来展开面试，我们就从面试角度反推，学好重要的知识点吧~

一、结合真题来搞懂H，P，T

• 概念: H是宏任务，P是promise为代表的微任务，T是setTimeout这类时间函数

• 什么宏？，什么微? , 什么任务??? ====> 宏任务与微任务必知

• 看屁看，这么多，就两句话:::

  • 宏任务 先(同一轮中)
    • 1. script 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js）
  • 微任务 后(同一轮中)
    • 1. Promise 2.process.nextTick（Node.js） 3. Object.observe（已废弃；Proxy 对象替代）4. MutaionObserver

• 理论1: H=>P=>T

• 理论2: H=>P=>H>P.... (T属于H)

Tips: 话不多说，看题~

1.P

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })

题解: 1,2
解析: Promise.resolve直接给数字1，那返回res 即1，到第1个console，输出1; 紧接着return 数字2，无异常，不catch走then，返回res为上面return的输出2

2.H + P

const 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中，按照上下文，走1，遇resolve，自行，把promise 的状态由pending改为了fulFilled，但这没有影响，继续走2，后执行promise，then是异步函数，丢微事件队列，走4，第一轮宏任务结束，走微任务，在积攒的事件队列中，按照先进先出，就一个then，走3。

3.H + P + T

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

    console.log('promise1', promise1)
    console.log('promise2', promise2)

    setTimeout(() => {
      console.log('promise3', promise1)
      console.log('promise4', promise2)
    }, 2000)

题解: promise1, promise2, 1, promise3, promise4
解析: 定义promise1，没有输出，走定义promise2，执行了promise1,发现一个T宏任务，丢下一个宏事件队列，紧接着遇then 是个异步函数，丢微事件队列，这次的宏任务查询还没完，往下又一个T宏任务，丢宏事件队列，再执行微任务，输出1，再执行第二轮宏任务，先入先出，resolve('success') 改掉promise1的status，但这没有影响，再走下一个宏任务，输出promise3，和promise4。

Tips: 这道题中前2个promise1，promise2，定义未执行，打印默认状态是pending，promise3打印时，promise1已经resolve了success，是fulFilled，值为'success'，promise4 也是fulFilled，只是promise2没有返回值，返回值默认是undefined

• 发现了吗，上述还有一个注释，我们放开这行报错会有什么不同？?

解析: 顺序还是那个顺序，只是输出1变成抛出一个错，promise4的执行结果中的promise2是rejected，返回值不再是undefined，而是Error

4.H + P + T

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

题解: 1, 5, 3, 4, 2
解析: 很典型，定义Promise时，输出1，遇到T宏任务，丢下一轮宏事件队列，遇promise立即resolve，修改了status，但这没有影响，then是异步函数，本轮丢微事件队列，紧接着resolve当前的promise，修改了status，但这没有影响，再遇到then是异步函数，丢本轮微事件队列，继续往下找，输出5，然后开始执行本轮的微事件队列，先入先出，输出3,4，再处理下一轮宏事件队列中，也是先入先出，执行2。

Tips: 这里的setTimeout 时间虽然是0，但不影响丢事件队列以及后续的执行顺序，这题也充分应证了我们上述的理论1 H=>P => T 由于T 函数也是宏任务，所以也符合理论2 H=>P => H=>P

5.P

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
解析: 故意放一道简单点的题，帮大家树立起信心去大厂厮杀~ 这题考的是状态只能从p=>f 或p=>r, 是不可逆的，这走了resolve，后到then，就不会走catch了

6.H + P + T

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
  }, 1000)
 resolve('success')
})
promise.then((res) => {
  console.log(res + 1)
})
promise.then((res) => {
  console.log(res + 2)
})

题解: success1,success2,once
解析: 定义promise，遇到T宏任务，丢宏事件队列，定义start，遇then异步函数，丢微事件队列，遇then异步函数，丢微事件队列，然后开始执行微事件队列，先入先出，输出'success1' 然后是再输出一遍，输出'success2' ，然后执行下一轮宏任务，输出once

• 那我们变一变，把promise的resolve 放进setTimeout 函数里，会怎么样??

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
    resolve('success')
  }, 1000)
})
promise.then((res) => {
  console.log(res + 1)
})
promise.then((res) => {
  console.log(res + 2)
})

题解: once, success1, success2
解析: 奇怪，怎么这次和我们前面的理论不匹配了呢??，差异是resolve放到了T宏任务中，我们再仔细考虑下，定义promise，却不给resolve和reject的时候，then是不会执行的，也就是只有执行到了then异步函数才会丢到微事件队列去，所以这里反而是要等setTimeout函数执行完，才去执行这两个then，当然也是先入先出执行。再看上面的题，都是在promise定义中就resolve或者reject了~

那我们趁热打铁~

7.H + P + T

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

题解: 1, 5, 3, 2, 4
解析: 定义promise，输出1，遇到T宏任务，丢宏事件队列，紧接着的promise直接resolve，因此遇到并执行then是异步函数，丢进微事件队列，所定义的Promise 没有resolve或reject，因此不会执行到它的then，那就继续往下，执行输出5，后执行微事件队列，输出3，然后执行下一轮宏事件队列，遇到resolve，这时候，会调用刚开始定义的Promise的then是个异步函数，丢这轮的微事件队列，执行输出2，本轮宏任务结束，执行微事件队列，输出4。

Tips: Promise.resolve().then() 这行为什么没有把new 的Promise 给resolve掉呢，我们要理解new Promise 是通过new 构造函数Promise得到一个Promise实例，而Promise.resolve() 会生成一个thenable的对象，也就是一个新的Promise实例，因此并不是同一个~

8.P

Promise.resolve()
      .then(() => {
        return new Error('error1')
        // throw Error('error1')
      })
      .then(res => {
        console.log('then: ', res)
      })
      .catch(err => {
        console.log('catch1: ', err)
        throw Error('error2')
      })
      .catch(err => {
        console.log('catch2: ', err)
      })

题解: then: Error:error1
解析: 这题主要考细节，这里return 的是一个Error 对象，所以是走then，而不是catch，throw一个Error 才是走catch。

• 那假设我们把注释放开，抛个错，是什么结果呢，答案是catch1: Error1, catch2:Error2 要注意的是catch 可以捕获紧挨着上个catch 中的异常 还记得上一篇我们说到catch 只是then的语法糖，本身就是thenable的，所以可以一直catch下去。

9.P

Promise.resolve()
      .then(
        function success1(res) {
          throw new Error('error')
        },
        function fail1(e) {
          console.error('fail1: ', e)
        }
      )
      .then(
        function success2(res) {},
        function fail2(e) {
          console.error('fail2: ', e)
        }
      )

题解: fail2: Error:error
解析: 这题就更需要理解catch 是then的语法糖了，以及then的两个参数(resolve, reject) ，Promise.resolve顺利执行，走resolve函数，这里就是success1，抛了个异常，那就看下面有没有catch，一看没有，但是有个then带着两个参数，我们经常看到then只有一个参数，是把第二个reject 省略了，默认只会执行resolve函数，而catch(reject) === then(undefined, reject)，因此这里执行fail2，输出fail2: Error:error。

10.H + P + T

   Promise.resolve().then(() => {
      console.log('then')
    })
   process.nextTick(() => {
      console.log('nextTick')
    })
    setImmediate(() => {
      console.log('setImmediate')
    })
    console.log('end')

题解: end, nextTick,then, setImmediate
解析: 这题主要考的是常见的HPT有哪些，H 普通宏任务，P是异步微任务，T 也是宏任务。其实也很好记，微任务我们能见到的就是promise 和process.nextTick, 其它都是宏任务,而script 就是我们脚本,也就是第一个宏任务。那再看这题，上来其实是第一个宏任务，脚本script自上而下执行，遇到nextTick，丢微事件队列，紧接着promise直接resolve，执行then为异步函数，丢微事件队列，然后是一个宏任务，丢下一轮宏事件队列，往下输出end，然后执行微事件队列，先入先出，但是，这里要注意process.nextTick() 优先级是高于Promise的，输出nextTick,再输出then，然后执行第二轮宏任务，输出setImmediate

Tips 很多同学拷贝代码进vue项目，vue3报了个process undefined，因为移除了, 有的还报setImmediate不兼容谷歌。vue2的话发现顺序好像并不是这样，这里必须强调是node环境下，跑一个js，所以请大家新建一个js，并在命令行node 这个js去实践~

但是既然涉及到了vue，我们来看下面这个有意思的事情

11.H + P + T 在vue环境下!!

   // 大家都知道vue 中有个this.$nextTick，很少会去用process.nextTick
   // !! 所以我们这里就谈this.$nextTick
    this.$nextTick(() => {
        console.log("nextTick1")
    })
    Promise.resolve().then(() => {
        console.log("then1")
    })
    setTimeout(() => {
         console.log("setTimeout")
    }, 0)
    this.$nextTick(() => {
         console.log("nextTick2")
    })
    Promise.resolve().then(() => {
    console.log("then2")
  })

题解: nextTick1,nextTick2,then1,then2,setTimeout
解析: 首先我们要知道vue的nextTick本质上是对Promise 的封装,那本来应该就看成promise 就可以啦，按照微任务的事件队列应该从上到下哇？？但关键是: vue内部的promise实例一直是同一个，也就是你写后面的nextTick 会被合并到一个promise中去执行的，先入先出，nextTick1, nextTick2，然后执行异步事件队列，then1,2，最后第二轮宏事件队列输出setTimeout

12.H + P + T

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

题解: 3,7,4,1,2,5
解析: 这个题涉及的东西很多，但是按照我们的理论2走，是很简单的，我们来理一下，首先，定义first，会执行输出3，定义了一个p 是promise 对象，定义中有输出7，遇到T函数，丢宏事件队列，紧接着resolve，那就要找到then去执行，看到下面有p的then是异步函数，承接的是数值1，丢微事件队列，继续走first 被resolve，找到first的then是异步函数，承接的数值是2，丢微事件队列，继续走，发现输出4，然后执行微事件队列，先入先出，输出1,2，再执行下一轮宏事件队列，输出5，紧接着resolve(6)，有同学蒙了，输出6 一个Promise 的状态修改是不可逆的，也就是不可以resolve reject 多次，因此不会输出6。

13.P

  var p = new Promise((resolve, reject) => {
      return Promise.reject(Error('error'))
    })
    p.catch(error => console.log(error.message))
    p.catch(error => console.log(error.message))

题解: Error: error
解析: 没错，前面的题目可能稍微有点复杂，这里再给你树立起信心！！这个题目主要考的是如果Promise return 的是一个Promise，那么then的结果就会是这个Promise，我们知道就算return的是个数值，给到后面的也会包装成一个thenable的promise，因此这里没有抛出异常，只是把这个promise传下去了，那catch 也没东西可catch~

14.H + P + T

   var p = new Promise((resolve, reject) => {
      return Promise.reject(Error('error'))
    })
    p.catch(error => console.log(error.message))
    p.then(res => console.log(res))

题解: Error: error
解析: 没错，前面的题目可能稍微有点复杂，这里再给你树立起信心！！这题return 出去，但是既没有resolve，也没有reject，下面都不会触发，但是return的结果是个可执行的函数，抛出了一个异常Error: error

15.H + P + T + async

   async function async1() {
      console.log(1)
      const result = await async2()
      console.log(3)
    }
    async function async2() {
      console.log(2)
    }
    Promise.resolve().then(() => {
      console.log(4)
    })
    setTimeout(() => {
      console.log(5)
    })
    async1()
    console.log(6)

题解: 1,2,6,4,3,5
解析: 这题主要在于async，await，async函数是generate的语法糖，在这里async1中的await async2() 我们要怎么去看待呢，首先, 定义async 1 是个function，没有自行，async2也是，到了promise，直接resolve，then异步函数丢微事件队列，遇T宏任务丢宏事件队列，往下执行async1，输出1，遇到await async2，这部分相当于Promise((resolve,reject)=>{console.log(2)}).then(res=>{console.log(3)})，因此输出2直接执行，输出3丢微事件队列，追究下result 是什么?? 由于没有return值，result 就是个undefined，注意这时候第一轮宏任务还没完，还有个输出6，然后执行微事件队列，先入先出原则，是4,3，最后执行第二轮宏任务中的输出5。

16.H + P + T + async

   async function async1() {
      console.log('1')
      await async2()
      console.log(2)
      Promise.resolve().then(() => {
        console.log(9)
      })
    }
    async function async2() {
      console.log('3')
    }
    console.log('4')
    setTimeout(() => {
      console.log('5')
    }, 0)
    async1()
    new Promise(function (reslove) {
      console.log('6')
      reslove()
    }).then(function () {
      console.log('7')
    })
    console.log('8')

猫咪

题解: 你在想Peach? 来试试手吧，这题和上面的很类似，不过要小心的是async2里的then函数执行的不是简单的输出，而是又一个异步函数，我们之前只是看作Promise((resolve,reject)=>{console.log(2)}).then(res=>{console.log(3)})，现在 console.log(2)
Promise.resolve().then(() => {
console.log(9)
}) 整体替换了之前的3，所以执行这个整体时，先会执行2，没错，但是紧接着遇到直接resolve的promise，then是异步函数，把输出9丢这一轮的微事件队列中去，7 和 3 是同级别的，明白了吧，而这个9 是执行3时丢微事件队列，它要比3,7都晚，但是好歹是微事件队列，因此还是在5之前。

行，答案呼之欲出，欢迎打在评论区交流下，撰文不易，多多点赞支持下哟~(￣▽￣)"