課程目標
- 認識 promise chain 鏈接與收尾處理
課程內容
接著來學 promise chain 的收尾處理吧！
繼續拿 jquery 當範例，只要在上次的 promise chain 最後，加上 .always() 就可以了！
$.get(url, params).then((data) => {
// do something with data to get params2
return $.get(url2, params2);
}).then((data) => {
// do something with data to get params3
return $.get(url3, params3);
}).then((data) => {
// do the final task with data
}).catch((err) => {
alert('Something went wrong.');
}).always(() => {
// hide the loading icon
});
很簡潔有力吧！
⚠️特別注意事項⚠️
因為某些歷史因素，jquery 包裝的 promise 跟現在瀏覽器原生的 promise 有點不太一樣！
原生的 promise 是 .finally()，而不像 jquery 是 .always()！
為了教學方便，本課＆作業都用 jquery 示範，實務上如果看到 .finally() 請不要意外！
都是類似東西，知道這樣就好！
課後作業
請拿出第二課的作業，我們來改善這個頁面的 UX（使用者體驗），明確提示「忙碌中」這個狀態
- 請用 html 元素，在頁面中加入一段
讀取中，請稍等...的訊息，這個元素預設不顯示 - 在開始呼叫 API 的地方，用 js 操作來讓那個 html 元素顯示
- 在結束呼叫 API 的地方，使用
always()，用 js 操作來讓那個 html 元素隱藏
寫完之後，你應該會發現不但 callback hell 改善了、錯誤處理有了、連 UX 都改善了！
做出以上功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
課程內容
作業繳交 https://jsfiddle.net/2hxz3kn1/22/