try...catch 是 JavaScript 中用於錯誤處理的重要語句。它允許開發者在代碼運行中捕捉並處理錯誤,而不是讓錯誤直接導致程式崩潰。這種結構通常在需要處理潛在錯誤的代碼區塊中使用,例如 API 請求、檔案讀取或需要與外部資源互動的情況。 ## 基本語法 try...catch 語句包含三個主要部分: ```javascript= try { // 可能會引發錯誤的代碼 } catch (error) { // 錯誤發生時執行的代碼 } finally { // 無論是否發生錯誤都會執行的代碼(可選) } ``` 1. try 區塊:放置可能會出錯的代碼。例如,在資料處理或外部請求過程中,若發生了例外,程式會跳到 catch 區塊。 2. catch 區塊:處理錯誤的區塊,catch 接收一個 error 參數,包含錯誤的訊息、名稱等資訊。可以使用此資訊來診斷錯誤。 3. finally 區塊(可選):無論是否發生錯誤都會執行的代碼。常用於釋放資源或清理操作,例如關閉連接或釋放記憶體。 另外 try...catch 結構常與 async 和 await 一起使用,以便處理異步操作中的錯誤。當我們使用 async 關鍵字宣告一個函式時,該函式會返回一個 Promise,並且可以在函式內使用 await 來等待其他 Promise 結果,從而讓程式流程變得更加直觀易讀。try...catch 可用來捕捉在 await 等待的異步操作中可能出現的錯誤。 ## 題目 請複製 (右下角 fork)這個[範例](https://codepen.io/yen-kg/pen/LYwaObB?editors=1011),使用 async/await + try catch 寫法取得呼叫 API 的結果 https://dog.ceo/api/breeds/image/random ,並在 console 印出 圖片 URL。 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: ``` async function fetchAPI() { try { const response = await fetch('https://dog.ceo/api/breeds/image/random'); const responseJson = await response.json(); console.log(responseJson.message); } catch (error) { console.error("取得資料時發生錯誤:", error.message); } } fetchAPI(); ``` --> 回報區 --- | # | Discord | CodePen / 答案 | |:---:|:-------------- |:----------------------------------------------------------------------------- | | 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/GgKQdba?editors=1011) | | 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/EaYGKRB?editors=1011) | | 3 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/NPKmOrK) | | 4 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/mybgzOa?editors=0011) | | 5 | Toung | [Codepen](https://codepen.io/Toung/pen/xbKeyrp) | | 6 | han |[Codepen](https://codepen.io/iamHanCheng/pen/VYZNEbG?editors=1011)| | 7 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/MYgRPbe) | | 8 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/azoxRKY) | |9|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/xbKeyMJ?editors=1011)| | 10 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/qEWwQBL?editors=0011) | | 11 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/emOobOo) | | 12 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/pvzBqEG) | | 13 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/emOobPN) | | 14 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/ogvOJVG) | | 15 | Clove | [Codepen](https://codesandbox.io/p/sandbox/wtgy7h) | | 16 | Noy(Toad)| [Codepen](https://codepen.io/MochiCodingPen/pen/RNbOzOG?editors=1011) | | 17 | Kaya| [Codepen](https://codepen.io/kayaribi/pen/QwLPeRX) | | 18 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/JoPqoNG?editors=1011) | | 19 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/XJrwJmL?editors=1011) | | 20 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/RNbmpwo?editors=1011) | | 21 | Amanda | [Codepen](https://codepen.io/cym199922/pen/KwPLqBZ) | | 22 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/OPLYKJp)| | 23 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/zxOVOdN?editors=1011)| | 24 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/gbYNONw?editors=1011) | | 25 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/gbYNzgg) | | 26 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/LEYPpjd) | | 27 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/raNeEdK?editors=1011) | | 28 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/raNMgdV?editors=1011) | | 29 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/MYWmxoL?editors=1011) | | 30 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/RNwjExo?editors=1011) | | 31 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/qEBMpGP?editors=1012) | | 32 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/QwwYJer?editors=0011) | | 33 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/raVRPGv?editors=1011) | | 34 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/jEWMewy) | --- - 快速複製格式: ```markdown! | 0 | user | [Codepen]() | ```