課程目標

  • 認識 promise chain 鏈接

課程內容

體驗過 callback hell 之後,工程師在 ES2015 提出了一個解決辦法,叫做 Promise

先不談細節,直接體驗使用方式看看!

繼續拿 jquery 為範例(因為 jquery 後來也有支援 promise 介面):

原本是把 callback function 當成參數傳遞

$.get(url, params, (data) => {
  // do something with data
})

現在改成串接呼叫 .then() 函式,然後把 callback function 放在這邊

$.get(url, params).then((data) => {
  // do something with data
})

乍看之下好像沒差,只是搬出來而已,其實真正的威力在於,連續多個非同步任務的時候

原本是越來越深層的 callback hell

$.get(url, params, (data) => {
  // do something with data to get params2

  $.get(url2, params2, (data) => {
    // do something with data to get params3

    $.get(url3, params3, (data) => {
      // do the final task with data
    });
  });
});

可以改寫成,在 .then() 中使用 return 來回傳 新的 promise,並且串接在一起

$.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
});

注意看!這段程式碼非常巧妙,不論執行多少個非同步任務,callback function 深度都只有一層!

大幅改善了 callback hell 的問題!

有點看不懂沒關係,就先跟著使用方式,照做即可!

工作上多用幾次之後,會逐漸抓到感覺!

就先跟著作業,試著使用看看 promise 吧!

課後作業

在前一課的作業中,你稍微體驗到 2000 年代,前端工程師面對的 callback hell

在這一課的作業,我們將時間快轉到 2015 年代,體驗一下所謂「Promise Chain 鏈接」是什麼


jquery 除了一開始的寫法之外

$.get(url, params, callback)

也有支援 promise 介面

$.get(url, params).then(callback)

請將上一課的作業,使用 promise chain 改寫

寫完之後,你應該會看到多個 .then() 串接在一起,不再出現多層深度的巢狀 callback 傳遞了!

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

⚠️特別注意事項:請耐心 debug!⚠️

請注意,由於使用 promise 介面,一般來說要同時寫「錯誤處理」的部份

這一課因為略過這部份沒寫,程式碼出錯的話,在「瀏覽器的開發者工具 console」裡面,可能不會顯示錯誤訊息!這會讓除錯難度增加!會比較難寫,這不是常態!是本課簡化內容的結果!

請用 console.log 慢慢查看每行程式碼的執行結果,慢慢寫出這一課作業!


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

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

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

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

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


共有 7 則留言

作業繳交
https://jsfiddle.net/jason60810/9zd0wpjL/42/

then():用於處理成功的回應。這裡我們會獲得用戶ID和訂單ID。

catch():用於捕捉錯誤。例如,如果我們試圖獲取一個不存在的訂單ID,catch()會被觸發。

finally():不管成功或失敗,這一段總會被執行。在這裡,我們用它來隱藏loading提示。

因為jQuery自身不支持finally(),所以我用Promise.resolve()將jQuery的$.get()轉為原生的Promise,這樣我們就能使用finally()了。

按讚的人:

寫得很好,順利完成!
感謝補充資訊!

免費

邁向資深之路:非同步 JS 訓練(一)—— 從 Callback Hell 到 Promise 介面

工作了很多年,還是搞不太懂 promise、async/await 是什麼嗎?用這份作業包一次搞定!


👉 身份:資深全端工程師、指導過無數人半路出家轉職 👉 使命:打造 CodeLove 成為優質新手村,讓非本科也有地方自學&討論