課程目標

  • 認識 async/await 語法與錯誤處理

課程內容

在非同步訓練一的課程,我們初步體驗到 async/await 寫起來的感覺,效果不錯!

這次來試著加上錯誤處理!

說起來也神奇,只要使用 try/catch 語法包起來就可以了!

try {
  const data1 = await $.get(url, params);

  // do something with data to get params2

  const data2 = await $.get(url2, params2);

  // do something with data to get params3

  const data3 = await $.get(url3, params3);

  // do the final task with data
} catch (err) {
  alert('Something went wrong.');
}

因為 try/catch 本來就是一般同步程式設計語言會用到的錯誤處理語法

所以這整段程式碼,看起來跟一般的同步程式設計,幾乎一模一樣!


上次我們說過:每次只要看到 await,就要去想「現在是去剝開 promise 的 then 裡面,拿出最後回傳的內容!」

現在可以多補充一句:「如果 await 後面的非同步任務跑失敗,就會直接 throw exception(拋出例外)」

有點看不懂沒關係,就先跟著使用方式,照做即可!

工作上多用幾次之後,會逐漸抓到感覺!

課後作業

這一次的作業,我們要延續「非同步 JS 訓練一:第3課」的內容,並且加上錯誤處理

https://codelove.tw/@howtomakeaturn/post/bapzbx

請找出你上次寫的作業,把上次的三組 API,換成以下這三組

https://codelove.tw/fake-api/get-current-user-unstable
https://codelove.tw/fake-api/get-orders-unstable
https://codelove.tw/fake-api/get-order-details-unstable

幾點注意事項如下:

  • 繼續用 $.get() 來呼叫 API 即可
  • 寫一個 try/catch 就好了,不要寫成多個 try/catch
  • 任何一個 API 失敗時,請 alert('抱歉,系統出了點問題,請稍後再試一次。');

寫完之後,你會發現,整段程式碼看起來很像「一般程式語言中,同步程式設計」的寫法!

try/catch 看起來都跟常見程式語言的錯誤處理,一模一樣!

做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 2 則留言

作業繳交 https://jsfiddle.net/p1xtjoze/6/

按讚的人:

寫得很好,順利完成!