JavaScript 容错处理代码（屏蔽 JS 错误）

在开发 JavaScript 应用时，错误是不可避免的。为了提高用户体验，您可能希望在发生错误时进行容错处理，避免应用程序崩溃。以下是几种常用的方法来屏蔽 JavaScript 错误。

1. 使用 try...catch 语句

try...catch 是处理异常的标准方式，可以捕捉到代码块中的错误并进行处理：

try {
    // 可能会抛出错误的代码
    riskyFunction();
} catch (error) {
    console.error("发生错误:", error);
    // 进行错误处理，比如显示用户友好的消息
}

示例

function riskyFunction() {
    // 故意抛出错误
    throw new Error("这是一个错误");
}

try {
    riskyFunction();
} catch (error) {
    console.error("捕获到错误:", error.message);
}

2. 全局错误处理

可以使用 window.onerror 事件来捕获未处理的错误，避免页面崩溃：

window.onerror = function(message, source, lineno, colno, error) {
    console.error("捕获到全局错误:", message);
    // 进行错误处理，比如发送错误日志到服务器
    return true; // 返回 true 可以阻止浏览器的默认错误处理
};

示例

window.onerror = function(message, source, lineno, colno, error) {
    console.error("全局错误:", message, "在", source, "的", lineno + ":" + colno);
    // 可以在这里进行日志记录或其他处理
    return true;
};

// 故意抛出一个错误
nonExistentFunction();

3. 使用 Promise 的 .catch()

对于使用 Promise 的异步操作，可以通过 .catch() 方法捕获错误：

function asyncFunction() {
    return new Promise((resolve, reject) => {
        // 故意抛出错误
        reject(new Error("异步操作中的错误"));
    });
}

asyncFunction()
    .catch(error => {
        console.error("捕获到异步错误:", error.message);
    });

4. 使用 try...catch 处理异步函数

对于异步函数，可以结合 async/await 和 try...catch 进行错误处理：

async function asyncRiskyFunction() {
    // 可能会抛出错误的代码
    throw new Error("这是一个异步错误");
}

(async () => {
    try {
        await asyncRiskyFunction();
    } catch (error) {
        console.error("捕获到异步错误:", error.message);
    }
})();

5. 防止错误传播

在某些情况下，您可能希望防止错误进一步传播。可以通过捕获错误并处理它们：

function safeFunction() {
    try {
        // 可能抛出错误的代码
        throw new Error("错误发生");
    } catch (error) {
        console.error("处理错误:", error.message);
        // 处理完错误后不再抛出
    }
}

safeFunction();