JavaScript - try...catch：新手掌握錯誤處理

你好，有抱負的程式設計師們！今天，我們將踏上一段令人興奮的旅程，進入JavaScript錯誤處理的世界。別擔心你對編程是新手——我會帶你一步步學習，並提供大量的範例和解釋。在這個教學結束時，你將能夠像專家一樣捕獲錯誤！

JavaScript - try...catch

JavaScript try...catch 語句

想像一下你正在學習騎自行車。你可能會摔倒幾次，但沒關係——你會爬起來再試一次。在編程中，我們使用 try...catch 語句來做類似的事情。我們 "嘗試" 執行一些代碼，如果它 "摔倒"（拋出錯誤），我們就 "捕獲" 它並優雅地處理。

讓我們看一個簡單的範例：

try {
// 可能會導致錯誤的代碼
console.log(nonExistentVariable);
} catch (error) {
// 處理錯誤的代碼
console.log("哎呀！發生了一個錯誤:", error.message);
}

在這個範例中，我們試圖打印一個不存在的變量。而不是讓我們的程式崩潰，catch 塊捕獲了錯誤並打印了一個友好的消息。

JavaScript try...catch...finally 語句

有時候，我們希望無論是否發生錯誤，都想要執行一些代碼。這時，finally 塊就派上用場了。這就像說："無論發生什麼，一定要做這件事！"

try {
console.log("我們試著除以零！");
let result = 10 / 0;
console.log("結果:", result);
} catch (error) {
console.log("哦不！發生了一個錯誤:", error.message);
} finally {
console.log("這段代碼總是會運行，無論是否有錯誤！");
}

在這個範例中，即使除以零會導致錯誤，finally 塊仍然會執行。

JavaScript 抛出語句

有時候，我們想要創造自己的錯誤。我們可以使用 throw 語句來做到這一點。這就像在遊戲中當裁判並在看到犯規時吹哨。

function checkAge(age) {
if (age < 0) {
throw new Error("年齡不能是負數！");
}
console.log("年齡有效:", age);
}

try {
checkAge(-5);
} catch (error) {
console.log("捕獲到一個錯誤:", error.message);
}

在這裡，當有人嘗試使用負數年齡時，我們會拋出自己的錯誤。

嵌套 Try 塊

就像嵌套的娃娃一樣，我們可以在彼此之間嵌套 try...catch 塊。這在我們想要在代碼的不同層次上處理錯誤時非常有用。

try {
try {
throw new Error("哎呀！");
} catch (innerError) {
console.log("內部捕獲:", innerError.message);
throw innerError; // 重新拋出錯誤
}
} catch (outerError) {
console.log("外部捕獲:", outerError.message);
}

在這個範例中，我們在內部塊中捕獲錯誤，記錄它，然後重新拋出，讓外部塊捕獲。

重新拋出錯誤

有時候，我們想要捕獲一個錯誤，對它做一些處理，然後將它傳遞給其他地方處理。這被稱為重新拋出錯誤。

function doSomethingRisky() {
throw new Error("危險，威爾·羅賓森！");
}

try {
doSomethingRisky();
} catch (error) {
console.log("記錄錯誤:", error.message);
throw error; // 重新拋出錯誤
}

在這裡，我們捕獲了錯誤，記錄了它，然後重新拋出它，讓代碼的其他部分來處理。

條件 Catch 塊

在某些情況下，我們可能想要以不同的方式處理不同類型的錯誤。我們可以在 catch 塊中檢查錯誤類型。

try {
let randomNumber = Math.random();
if (randomNumber < 0.5) {
throw new TypeError("類型錯誤！");
} else {
throw new RangeError("範圍錯誤！");
}
} catch (error) {
if (error instanceof TypeError) {
console.log("處理 TypeError:", error.message);
} else if (error instanceof RangeError) {
console.log("處理 RangeError:", error.message);
} else {
console.log("未知錯誤:", error.message);
}
}

這個範例展示了我們如何以不同的方式處理不同類型的錯誤。

JavaScript try...catch 與 setTimeout() 方法

當使用異步代碼時，錯誤處理可能會有些棘手。讓我們看看如何在 setTimeout() 函數中處理錯誤。

try {
setTimeout(() => {
throw new Error("異步錯誤！");
}, 1000);
} catch (error) {
console.log("這不會捕獲到錯誤！");
}

// 正確的方式：
setTimeout(() => {
try {
throw new Error("異步錯誤！");
} catch (error) {
console.log("捕獲到異步錯誤:", error.message);
}
}, 1000);

第一次嘗試不會工作，因為錯誤是在 try...catch 塊執行完畢後才被拋出的。第二次嘗試正確地捕獲了錯誤。

基於 Promise 的錯誤

當使用 Promises 時，我們使用 .catch() 來處理錯誤。這就像 catch 塊，但用於異步操作。

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("數據獲取失敗"));
}, 1000);
});
}

fetchData()
.then(data => console.log("數據:", data))
.catch(error => console.log("錯誤:", error.message));

在這個範例中，我們模擬了一次數據獲取失敗，並捕獲了相應的錯誤。

JavaScript 中的錯誤類型

JavaScript 有多種內置的錯誤類型。下面是一個總結這些錯誤類型的表格：

錯誤類型	描述
Error	通用錯誤類型
SyntaxError	代碼中存在語法錯誤時發生
ReferenceError	引用不存在變量時發生
TypeError	變量類型不符合期望時發生
RangeError	變量值不在期望範圍內時發生
URIError	使用 URI 處理函數不當時發生
EvalError	使用 `eval()` 函數不當時發生

理解這些錯誤類型可以幫助你寫出更精確的錯誤處理代碼。

這就是全部了！你剛剛完成了JavaScript錯誤處理的速成課程。記住，錯誤不是你的敵人——它們是寶貴的反饋，幫助你寫出更好、更健壯的代碼。持續練習，保持好奇心，並且快樂編程！

Credits: Image by storyset