JavaScript - try...catch：初学者掌握错误处理

你好，有抱负的程序们！今天，我们将踏上一段激动人心的旅程，探索JavaScript错误处理的世界。如果你是编程新手，不用担心——我会通过大量的示例和解释引导你完成每一步。在本教程结束时，你将能够像专业人士一样捕捉错误！

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 语句

有时，我们希望创建自己的错误。我们可以使用 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...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