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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖(需打開程式碼的部分觀看)

<!-- 解答:
```
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]() |
```