課程目標
- 認識 promise chain 鏈接與錯誤處理
課程內容
在非同步訓練一的課程，我們初步體驗到 promise chain 寫起來的感覺，效果不錯！
這次來試著加上錯誤處理！
只要在上次的 promise chain 最後，加上 .catch() 就可以了！
$.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.');
});
上面這段程式碼，總共發了三次 ajax，不論是哪一次失敗，都會被最後的 .catch() 捕捉到喔！
很簡潔有力吧！
看到這邊，你可能會心想，可是上次 callback hell 的寫法，我可以針對三個 api 分別寫不同的 callback，顯示不同的錯誤訊息耶！
這次只能寫一個 callback，給一個籠統的系統錯誤，好像 UX 不夠好呀？
其實你說的沒錯！這樣寫的確會有這問題！
但我個人經驗是，系統跑 ajax 失敗，其實整體 UX 已經很不好了，用戶已經覺得這網站很難用了
明確顯示哪個步驟失敗，其實幫助不大。就一律在訊息中「道歉＆懇請用戶再試一次＆告知可以回報客服」就好了！
（如果真的要顯示不同錯誤訊息，是有其他 promise 比較複雜的寫法，這一課先不談論）
課後作業
這一次的作業，我們要延續「非同步 JS 訓練一：第2課」的內容，並且加上錯誤處理
https://codelove.tw/@howtomakeaturn/post/8aAPD3
請找出你上次寫的作業，把上次的三組 API，換成以下這三組
https://codelove.tw/fake-api/get-current-user-unstable
https://codelove.tw/fake-api/get-orders-unstable
https://codelove.tw/fake-api/get-order-details-unstable
幾點注意事項如下：
- 繼續用
$.get()來呼叫 API 即可 - 寫一個
.catch()就好了，不用特別寫三種錯誤訊息 - 任何一個 API 失敗時，請
alert('抱歉，系統出了點問題，請稍後再試一次。');
寫完之後，你應該會看到多個 .then() 串接在一起，不再出現多層深度的巢狀 callback 傳遞了！
而且錯誤處理的部份，也比之前改善很多，簡單又清楚！
做出以上功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
作業繳交 https://jsfiddle.net/hung19091/pzn1538o/