每日挑戰,從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)

倒數幾張的防雷圖~~~

thinking-day23

以下為輸出結果

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的取值才是非同步的操作

本文章同步發布於個人部落格,有興趣的朋友也可以來逛逛~!

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s