每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day23

tags: ItIron2021 Javascript

前言

今天又要继续非同步与promise的爱恨纠葛了，大家再努力一下下吧! 看久了promise的题目其实也是挺有趣的

本日题目与解释

请问下方的程序码输出结果为?

const promise = new Promise((resolve,reject)=> {
  console.log(1)
  resolve(5)
  console.log(2)
  reject(6)
})

promise.then((value)=> {
  console.log(value)
  console.log(3)
}).catch(value => {
  console.log(value)
})

console.log(4)

倒数几张的防雷图~~~

以下为输出结果

1
2
4
5
3

要解决这个问题就需要把你前几天所学的东西全部用上了

• 同步与非同步的处理顺序
• promise的宣告与取值

我们都知道js根据event loop会先执行同步的程序码，所以

1
2
4

会先被印出，看到这边你可能觉得有点奇怪了，1 & 2不是在promise里面吗? 而promise不是非同步的程序码吗?
nonono 可爱的傻孩子，promise会产生一个非同步的值，但它从来就不是非同步的程序码，取值的行为是非同步没错，因为我不知道你会在什麽时候呼叫.then或是.catch，但promise一旦定义就会马上执行里面的程序码，否则它怎麽会知道该resolve还是reject这个promise呢?

现在我们处理完同步的部分了，剩下的就是promise取值而已罗!

promise.then((value)=> {
  console.log(value)
  console.log(3)
}).catch(value => {
  console.log(value)
})

要解这段程序码，首先你就需要知道这个promise最终的状态是fulfilled || rejected，回头看一下吧!

const promise = new Promise((resolve,reject)=> {
  console.log(1)
  resolve(5) // 先到先赢，是fulfilled
  console.log(2)
  reject(6)
})

记得我们之前提到的观念吗?

• promise一旦状态改变後就不会再变化了

因此，一旦执行resolve或reject之後，你後面有再多的resolve/reject都不会改变结果的! 既然是fulfilled我们就可以放心地只看.then那段，而resolved的值就是我们的value，最终可以看成

promise.then((value)=> {
  console.log(5)
  console.log(3)
})

综合起来就是你看到的12453罗! 一步步拆解後也没这麽难对吧?

本日核心观念与总结

核心观念

event loop、promise

总结

• 了解同步/非同步的执行顺序
• 理解promise的取值才是非同步的操作

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!