課程目標
- 認識 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 慢慢查看每行程式碼的執行結果，慢慢寫出這一課作業！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
作業繳交 https://jsfiddle.net/jason60810/9zd0wpjL/42/
then()：用於處理成功的回應。這裡我們會獲得用戶ID和訂單ID。
catch()：用於捕捉錯誤。例如，如果我們試圖獲取一個不存在的訂單ID，catch()會被觸發。
finally()：不管成功或失敗，這一段總會被執行。在這裡，我們用它來隱藏loading提示。
因為jQuery自身不支持finally()，所以我用Promise.resolve()將jQuery的$.get()轉為原生的Promise，這樣我們就能使用finally()了。
作業繳交 https://jsfiddle.net/hung19091/j0zfvsk2/
邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
工作了很多年，還是搞不太懂 promise、async/await 是什麼嗎？用這份作業包一次搞定！
作業繳交 https://jsfiddle.net/gk5neq6z/78/