Z
ZHANK
实用技能

错误处理

学习 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(); // 阻止控制台报错
});