JavaScript 如何捕获异常：从基础到进阶的完整指南

在 JavaScript 开发中，异常处理是保证代码健壮性的关键环节。无论是用户输入错误、网络请求失败，还是第三方库的意外行为，都可能导致程序崩溃或行为异常。如何优雅地捕获异常并提供合理的回退方案，是每个开发者必须掌握的技能。

本文将深入探讨 JavaScript 中的异常捕获机制，涵盖try...catch、Promise错误处理、async/await异常捕获，以及现代 JavaScript 的最佳实践。

1. 为什么需要异常处理？

JavaScript 是动态类型语言，运行时错误（如TypeError、ReferenceError）和逻辑错误（如JSON.parse解析失败）可能导致程序中断。异常处理的目的是：

• 防止程序崩溃：捕获错误并继续执行。
• 提供回退方案：如返回默认值或降级数据。
• 记录错误日志：便于调试和监控。

2. 基础：try...catch语句

try...catch是 JavaScript 最基础的异常捕获机制，适用于同步代码。

语法

try{// 可能抛出异常的代码}catch(error){// 捕获异常并处理}finally{// 可选：无论是否出错都会执行的代码}

示例 1：捕获函数调用错误

functiondivide(a,b){try{if(b===0){thrownewError("除数不能为零");}returna/b;}catch(error){console.error("计算错误:",error.message);returnInfinity;// 返回默认值}}console.log(divide(10,2));// 5console.log(divide(10,0));// Infinity（捕获错误）

示例 2：解析 JSON 数据

functionparseJson(jsonString){try{returnJSON.parse(jsonString);}catch(error){console.error("JSON 解析失败:",error);returnnull;// 返回 null 作为默认值}}console.log(parseJson('{"name": "Alice"}'));// { name: "Alice" }console.log(parseJson("invalid json"));// null（捕获错误）

finally的作用

finally块中的代码无论是否出错都会执行，常用于资源清理（如关闭文件、释放连接）：

try{// 尝试操作}catch(error){// 处理错误}finally{console.log("操作结束");// 一定会执行}

3. 异步错误处理：Promise与catch

在异步编程中，try...catch无法直接捕获Promise的错误（因为Promise的执行是分离的）。此时需使用.catch()或try...catch结合async/await。

方法 1：Promise.catch()

fetch("https://api.example.com/data").then((response)=>response.json()).catch((error)=>{console.error("请求失败:",error);return{default:true};// 返回默认数据});

方法 2：async/await+try...catch

asyncfunctionfetchData(){try{constresponse=awaitfetch("https://api.example.com/data");constdata=awaitresponse.json();returndata;}catch(error){console.error("请求失败:",error);return{default:true};// 返回默认数据}}fetchData().then(console.log);// 正常数据或默认值

4. 全局错误捕获：window.onerror

对于未被try...catch捕获的全局错误（如未处理的Promise拒绝），可以通过以下方式监听：

未处理的Promise拒绝

window.addEventListener("unhandledrejection",(event)=>{console.error("未处理的 Promise 错误:",event.reason);event.preventDefault();// 阻止默认行为（如控制台报错）});

全局错误事件

window.onerror=function(message,source,lineno,colno,error){console.error("全局错误:",{message,source,lineno,colno,error});returntrue;// 阻止浏览器默认错误提示};

5. 现代 JavaScript 的最佳实践

1. 区分错误类型

通过instanceof或error.name判断错误类型，提供针对性处理：

try{// 可能出错的代码}catch(error){if(errorinstanceofTypeError){console.error("类型错误:",error.message);}elseif(errorinstanceofSyntaxError){console.error("语法错误:",error.message);}else{console.error("未知错误:",error);}}

2. 自定义错误类

继承Error类创建自定义错误，便于识别和调试：

classValidationErrorextendsError{constructor(message){super(message);this.name="ValidationError";}}try{thrownewValidationError("输入无效");}catch(error){console.error(error.name,error.message);// ValidationError 输入无效}

3. 避免空catch块

空catch会隐藏错误，导致难以调试：

// ❌ 错误示例：吞掉错误try{riskyOperation();}catch(error){// 无处理逻辑}// ✅ 正确做法：至少记录错误try{riskyOperation();}catch(error){console.error("捕获到错误:",error);}

4. 使用可选链（Optional Chaining）简化防御性代码

对于可能为null/undefined的对象属性访问，可用可选链（?.）减少try...catch的使用：

// 传统方式letname;try{name=user.profile.name;}catch(error){name="Anonymous";}// 现代方式constname=user?.profile?.name??"Anonymous";

6. 总结

关键原则：

1. 明确捕获范围：避免过度捕获导致错误被隐藏。
2. 提供有意义的回退：默认值应符合业务逻辑。
3. 记录错误日志：便于排查问题。
4. 优先使用现代语法：如async/await、可选链等。

通过合理使用异常处理机制，可以显著提升 JavaScript 应用的稳定性和用户体验。