接著來學 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(使用者體驗),明確提示「忙碌中」這個狀態
讀取中,請稍等...
的訊息,這個元素預設不顯示finally
語法,用 js 操作來讓那個 html 元素隱藏做出以上功能,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
作業繳交
https://jsfiddle.net/a48fwbup/4/