每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 – Day22

tags: ItIron2021 Javascript

前言

昨天我們用很粗略的方式簡單說明了什麼是promise,打鐵要趁熱,我突然好餓,我們馬上來一個相關的題目做練習吧! 因為是題目練習,篇幅會很短,放心放心!

本日題目與解釋

請問下方程式碼會有什麼輸出結果?

function promiseFn(num, time = 500) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      num ? resolve(`${num}, 成功`) : reject('失敗');
    }, time);
  });
}
promiseFn(0)
.then(value => console.log(value))
.catch(err => console.log(err))

防雷防雷~~~~

thinking-day22

最終輸出結果為

失敗

我不是說你的人生失敗,是最後會印出失敗的字樣😂

首先我們拆解一下這個問題,promiseFn是個函數,它最終會回傳一個promise,也就是說下方的程式碼其實是一個promise,所以它才可以用.then或是.catch去取值

promiseFn(0)

既然最後要取值,你就要知道這麼promise最後會是fulfilled || rejected,你才知道最終回傳的值是哪一個! 看一下promise內部怎麼決定的吧

num ? resolve(`${num}, 成功`) : reject('失敗')

是個簡單三元運算,其中會將num強制轉為布林值,而0屬於falsy value會被轉為false,最終執行reject(‘失敗’),這個promise最後的狀態是rejected!(如果你覺得強制轉型那邊看不懂,那請回去看之前關於強制轉型的文章:D)

剩下的就簡單囉! 如果是rejected,那我們只要看catch那段程式碼就好

promiseFn(0)
.then(value => console.log(value)) // 這行不會執行
.catch(err => console.log(err))  // 只執行這邊,而err的值是'失敗'

如何? 基本的promise應用題還算挺簡單的對吧!

本日核心觀念與總結

核心觀念

promise

總結

  • 了解如何解決最最基本的promise應用題(我想不出今天要總結什麼)

發表迴響

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

WordPress.com 標誌

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

Twitter picture

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

Facebook照片

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

連結到 %s