研究完 callback hell、promise chain、async/await 的錯誤處理
接著來用三課的時間,分別研究收尾處理吧!
讓我們先從 callback hell 的寫法開始!
什麼是收尾處理?
其實就是,有些事情,不論任務執行成功 or 失敗,都固定要執行
這種事情,可以在 success callback 跟 error callback 最後都寫,但這樣就重複寫了,很煩!
所以就有所謂的收尾處理,讓你寫一次就好了
如果繼續拿 jquery 做範例,看起來會像這樣:
$.ajax({
url: url,
data: params,
success: (res) => {},
error: (res) => {},
complete: () => {},
});
其實,就是再多一個 callback function 而已!很單純吧!
在連續多個 ajax call 的時候,錯誤處理機制,再加上收尾處理機制,想想看 callback hell 會有多嚴重!
看到這邊,你可能會想,到底什麼事情需要在收尾機制處理呀?
其實,以我個人經驗來說,需要放進收尾處理的東西,其實很少
最常見的就是處理畫面上的「載入中,請稍等...」的文字,或者是畫面上「用來代表忙碌中的一個旋轉的圖示」
不論任務執行結果,都需要把這些文字、圖示隱藏
老實說,很多人根本連「忙碌中」這個狀態也沒做,導致 UX 不太好
所以實務上,如果你發現專案中不太會寫收尾處理,那也算正常,你就知道有這功能可以用即可
在第一課的作業,你已經體驗到了 callback hell 與錯誤處理的悲劇
忍耐一下,這一課要再體驗一下當年工程師的痛苦:加上收尾處理吧!
請拿出第一課的作業,我們來改善這個頁面的 UX(使用者體驗),明確提示「忙碌中」這個狀態
讀取中,請稍等...
的訊息,這個元素預設不顯示$.ajax()
的 complete
參數,用 js 操作來讓那個 html 元素隱藏寫完之後,你應該會發現,有點難寫,而且顯示/隱藏的時機,有點奇怪!
如果想要讓顯示/隱藏的時機,完全正確,那就會重複很多一樣的 code!
別懷疑,就是這麼難寫、這麼奇怪!這就是當年前端開發的為難之處!
做出以上功能,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
作業繳交
https://jsfiddle.net/zk1h3vt6/4/