iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0

技術筆記

最後一篇技術文囉!想了很久最後一篇要寫什麼,本來想寫正規表達式或探究this,最後選擇async await,雖然有點超出我目前學習範圍,但由於前幾天再研究非同步,想一氣呵成,不想要結束在半路上迷路的感覺。

async await

  • 什麼是async?
    • async是一個特定函式,其內回傳的一定是一個promise。如果不是,也會自動被包裝成promise
    async function getPromise() {
      return 'hello'
    }
    
    
    const dataPromise = getPromise()
    console.log(dataPromise);
    
    https://ithelp.ithome.com.tw/upload/images/20231013/20163234YEeVW1jGWs.png
    • 因為回傳的是一個promise,所以可以用一般的promise.then的方式控制
    const p = new Promise( function (resolve, reject) {
      resolve('promise resolved value!')
    })
    
    async function getPromise() {
      return p
    }
    
    p.then(res => console.log(res))
    
    //promise resolved value!
    
  • 複習一般promise handling
const p = new Promise( function (resolve, reject) {
	resolve('promise resolved value!')
})


function getPromise() {
	p.then(res => console.log(res))
}

getPromise()

https://ithelp.ithome.com.tw/upload/images/20231013/20163234LTURJnK8XO.png

  • async await handling

    • await只能用在async函式中,不能單獨使用
    await function name(params) {
    //more coding...	
    }
    

    https://ithelp.ithome.com.tw/upload/images/20231013/20163234k5FXfoK4h3.png

    • async及await組合在一起,用來控制promise函式
const p = new Promise( function (resolve, reject) {
	resolve('promise resolved value!')
})

async function handlePromise() {
	const val = await p
	console.log(val);
}

handlePromise()

https://ithelp.ithome.com.tw/upload/images/20231013/20163234PlDTDg7sQT.png

  • 兩者間的不同:如果我們把promise函式p內設setTimeout讓行為在10秒後才被觸發
    • 一般promise handling
      • getPromise()內新增console.log('hello')
      const p = new Promise( function (resolve, reject) {
      setTimeout(() => {resolve('promise resolved value!')},     10000)
      })
      
      
      function getPromise() {
        p.then(res => console.log(res))
        console.log('hello');
      }
      
      getPromise()
      
      印出順序會是先'hello',10秒後再印出'promise resolved value!'
      https://ithelp.ithome.com.tw/upload/images/20231013/20163234DccdFy0Nb6.png
  • async await handling
    • handlePromise()內同樣新增console.log('hello')
    const p = new Promise( function (resolve, reject) {
    etTimeout(() => {resolve('promise resolved value!')},     10000)
    })
    
    
    async function handlePromise() {
     const val = await p
     console.log('hello');
     console.log(val);	
    }
    
    handlePromise()
    
    
    會在10秒後先印出hello再印出promise resolved
    • async await背後執行原理
      • 當JS引擎呼叫handlePromise後,handlePromise佇列在callstack中,隨即進入函式,遇到關鍵字await,會先把handlePromise丟出callstack,待指定秒數10秒後,再重新把handlePromise放入callstack並執行,所以印出狀態會跟一般的promise handling有所差異
      • 現在假設我們把兩個promise同時放入async function的情況
      • 範例1:p1指定5秒後執行,p2指定10秒後執行
      const p1 = new Promise( function (resolve, reject) {
      setTimeout(() => {resolve('hello, my friend.')}, 5000)
      })
      
      const p2 = new Promise(function (resolve, reject) {
          setTimeout(() => { resolve('how are you?') }, 10000)
      })
      
      
      async function handlePromise() {
          const val1 = await p1
          console.log(val1);	
      
          const val2 = await p2
          console.log(val2);
      
      }
      
      handlePromise()
      
      
      會依序在5秒後印出'hello, my friend.'10秒後印出'how are you?'
      -範例2:相反過來,p1指定10秒後執行,p2指定5秒後執行
      const p1 = new Promise( function (resolve, reject) {
      setTimeout(() => {resolve('hello, my friend.')}, 10000)
      })
      
      const p2 = new Promise(function (resolve, reject) {
          setTimeout(() => { resolve('how are you?') }, 5000)
      })
      
      
      async function handlePromise() {
          const val1 = await p1
          console.log(val1);	
      
          const val2 = await p2
          console.log(val2);
      
      }
      
      handlePromise()
      
      會在10秒後依序印出'hello, my friend.'跟'how are you?'
      • 因為handlePromise()會在遇到await p1就被丟出callstack等待10秒後,再回到callstack執行console.log(val1),但由於JavaScript為同步語言且不會等待的特性,p2在5秒時已存在,所以10秒後就會同時依序印出。
  • Error handling
    • 可以用前幾天提到的try catch
    • 因為async function回傳的是一個promise,所以也可以用傳統的.catch
  • async await跟原本的promise比,好在哪?
    • 做的事情其實都一樣,但await function可以取代之前promise內的callback,也可以避免一大串.then組合起來的promise chaining,寫起程式來更直覺更好懂,所以有另外一個講法說async await是語法糖。

心得

在比較一般的promise handling跟async await時,覺得對於印出順序的差異感到很驚訝也很有趣,期待我很快的會用上它,感受它的美好。

參考資料

童言童語

努力看完天書後,來點輕鬆的吧!分享我兒子的童言童語,調劑身心一下

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

2020/12/11
昨晚在跟樂咖碎唸他沒說到做到,
我:你說你不會再吃餅乾,事實上你又吃了!
咖:餅乾不是40,是90!
ㄜ不知道該怎麼接下去⋯

2020/11/24
阿咖的感冒終於告一段落,
昨晚用之前部門聚餐我主管給他的哈根達斯券換了冰淇淋回家吃,一口也不分我⋯
我:為什麼我老闆只給你沒給我?
阿咖:媽咪,你明天去跟你老闆說你感冒好了!


上一篇
Day27 reduce()
下一篇
Day29 精神食糧4
系列文
豆芽班日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言