站長阿川 · 09月12日

非同步 JS 訓練二：第3課 ── 認識 async/await 語法與錯誤處理

課程目標

認識 async/await 語法與錯誤處理

課程內容

在非同步訓練一的課程，我們初步體驗到 async/await 寫起來的感覺，效果不錯！

這次來試著加上錯誤處理！

說起來也神奇，只要使用 try/catch 語法包起來就可以了！

try {
  const data1 = await $.get(url, params);

  // do something with data to get params2

  const data2 = await $.get(url2, params2);

  // do something with data to get params3

  const data3 = await $.get(url3, params3);

  // do the final task with data
} catch (err) {
  alert('Something went wrong.');
}

因為 try/catch 本來就是一般同步程式設計語言會用到的錯誤處理語法

所以這整段程式碼，看起來跟一般的同步程式設計，幾乎一模一樣！

上次我們說過：每次只要看到 await，就要去想「現在是去剝開 promise 的 then 裡面，拿出最後回傳的內容！」

現在可以多補充一句：「如果 await 後面的非同步任務跑失敗，就會直接 throw exception（拋出例外）」

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

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

課後作業

這一次的作業，我們要延續「非同步 JS 訓練一：第3課」的內容，並且加上錯誤處理

https://codelove.tw/@howtomakeaturn/post/bapzbx

請找出你上次寫的作業，把上次的三組 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 即可
寫一個 try/catch 就好了，不要寫成多個 try/catch
任何一個 API 失敗時，請 alert('抱歉，系統出了點問題，請稍後再試一次。');

寫完之後，你會發現，整段程式碼看起來很像「一般程式語言中，同步程式設計」的寫法！

連 try/catch 看起來都跟常見程式語言的錯誤處理，一模一樣！

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

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

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

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

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

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

站長阿川

每週二 YT 直播問答，DC 可 Call-in，一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務：阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組（非官方）👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA