課程目標

  • 認識 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 都改善了!

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


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

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

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

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

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


共有 2 則留言