大厂面试Promise必备(下)

大厂经常会围绕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之前。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容