# 🏅Day31 - 認識 try catch 錯誤流程

try...catch 是 JavaScript 中用於錯誤處理的重要語句。它允許開發者在代碼運行中捕捉並處理錯誤，而不是讓錯誤直接導致程式崩潰。這種結構通常在需要處理潛在錯誤的代碼區塊中使用，例如 API 請求、檔案讀取或需要與外部資源互動的情況。

## 基本語法
try...catch 語句包含三個主要部分：

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。

<!-- 解答：

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();

-->

| Name | Codepen |
| -------- | -------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/emzBLJP) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/JoKNBEE) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/VYjMrwY?editors=1111)|
| Marco | [CodePen](https://codepen.io/MarcoChiu/pen/XJKezmo)|
| 地瓜 | [CodePen](https://codepen.io/ChippyYU/pen/WbxZXQX?editors=0011)|
| 老屠 | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/wBWrPpp?editors=1011)|
| cks40660 | [CodePen](https://codepen.io/CKS40660/pen/MYeEOVL)|
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/gbMGGqr?editors=1011)|
| 平平 | [CodePen](https://codepen.io/ypinpin/pen/VYjMQNZ)|
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/yyJzKjG)|
| Jin | [CodePen](https://codepen.io/Jin-L/pen/qENPoLZ)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/dPXVmgp)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/wBWrXvw)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/wBWrXdK?editors=0011)|
| 社子畢卡索 |[Codepen](https://codepen.io/pen?template=qENPyOe)|
| Percy |[Codepen](https://codepen.io/Percy-Ku/pen/yyJXaXg)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/NPramEQ?editors=0011)|
| 7Red | [CodePen](https://codepen.io/cch2655/pen/YPWrbQg) |
| kashiwatei | [CodePen](https://codepen.io/kashiwatei/pen/emzeYba?editors=1011) |
| Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/KwMypVz?editors=0011) |
| Wafa | [CodePen](https://codepen.io/dqricwgo-the-reactor/pen/PwzOPjp?editors=1111) |
| Jenna | [CodePen](https://codepen.io/abiscc14/pen/zxBPKMo) |
| andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/YPWrgXP?editors=1011) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/YPWEYqV?editors=1011) |
| Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/myEqGdw) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/JoKOaWK) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/gbMoaQg?editors=1011) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/ByzJoXw?editors=1011) |
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/azZEyXm?editors=1011)|
| wind | [Codepen](https://codepen.io/wind7y/pen/GgqyxaN) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/pvbajrr?editors=0011)
| Wen | [Codepen](https://codepen.io/hsiao-kevin/pen/ogLyEOY?editors=1011) |