課程目標

  • 認識 async/await 語法與收尾處理

課程內容

接著來學 async/await 的收尾處理吧!

說起來也神奇,只要加上 finally 區塊就可以了!

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.');
} finally {
  // hide the loading icon
}

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

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

就是這麼奇妙!應該不用我多解釋什麼了!


多補充一句,我個人開發比較複雜的前端應用時,最常用的語法就是這種!

我認為 async/await 加上 try/catch/finally 是最簡潔有力的!

錯誤訊息提示、忙碌狀態提示,通通都有了,很輕易就做出 UX 很棒的應用程式!

課後作業

請拿出第三課的作業,我們來改善這個頁面的 UX(使用者體驗),明確提示「忙碌中」這個狀態


  • 請用 html 元素,在頁面中加入一段 讀取中,請稍等... 的訊息,這個元素預設不顯示
  • 在開始呼叫 API 的地方,用 js 操作來讓那個 html 元素顯示
  • 在結束呼叫 API 的地方,使用 finally 語法,用 js 操作來讓那個 html 元素隱藏

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


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

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

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

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

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


共有 2 則留言