实用技能
错误处理
学习 try-catch、throw、自定义错误
错误处理
健壮的程序必须妥善处理错误,而不是让页面崩溃。
学完本章你将: 掌握 try-catch、throw、finally、错误类型。
try-catch 基础
javascript
try {
// 可能出错的代码
let result = JSON.parse("{ invalid json");
console.log(result);
} catch (error) {
console.error("解析失败:", error.message);
// error.name —— 错误类型
// error.message —— 错误消息
// error.stack —— 调用栈
} finally {
console.log("无论是否出错,都会执行");
}
throw 抛出错误
javascript
// 抛出不同类型的错误
function divide(a, b) {
if (b === 0) {
throw new Error("除数不能为零");
}
if (typeof a !== "number" || typeof b !== "number") {
throw new TypeError("参数必须是数字");
}
return a / b;
}
try {
console.log(divide(10, 0));
} catch (e) {
console.error(e.name, e.message);
}
错误类型
javascript
// 内置错误类型
new Error("通用错误");
new TypeError("类型错误"); // 变量类型不符合预期
new RangeError("范围错误"); // 数值超出范围
new ReferenceError("引用错误"); // 访问不存在的变量
new SyntaxError("语法错误"); // 代码语法错误
new URIError("URI 错误"); // encodeURI 出错
// 自定义错误
class ValidationError extends Error {
constructor(message, field) {
super(message);
this.name = "ValidationError";
this.field = field;
}
}
try {
throw new ValidationError("邮箱格式不正确", "email");
} catch (e) {
if (e instanceof ValidationError) {
console.log(`字段 ${e.field}:${e.message}`);
}
}
全局错误处理
javascript
// 浏览器中未捕获的错误
window.addEventListener("error", (event) => {
console.error("全局错误:", event.error?.message);
});
// Promise 中未处理的 rejection
window.addEventListener("unhandledrejection", (event) => {
console.error("未处理的 Promise 错误:", event.reason);
event.preventDefault(); // 阻止控制台报错
});