异常教程

JavaScript 错误 – Throw、Try 和 Catch（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，错误处理是构建健壮、可靠应用程序的核心技能之一。无论是新手还是中级开发者，都可能在代码执行过程中遇到意外的错误，而如何优雅地捕获、处理这些错误，直接影响着用户体验和系统稳定性。本文将围绕 JavaScript 错误 – Throw、Try 和 Catch 这一主题，通过循序渐进的方式，结合实际案例，深入讲解这三种机制的原理与使用场景，帮助开发者掌握错误处理的最佳实践。

错误的基本概念与分类

什么是 JavaScript 错误？

JavaScript 错误（Error）是指代码在运行过程中因逻辑错误、语法错误或资源不可用等原因导致的异常状态。例如，访问未定义的变量、调用不存在的方法、或尝试除以零等操作，都会触发错误。

错误可以分为以下两类：

  1. 语法错误（SyntaxError）：代码在解析阶段因语法不合法而直接报错，例如缺少分号或括号不匹配。这类错误需在代码运行前修正。
  2. 运行时错误（Runtime Error）：代码在执行过程中因逻辑问题或外部条件引发的错误，例如尝试读取 null 对象的属性。这类错误需要通过错误处理机制（如 try/catch）捕获。

JavaScript 错误的常见类型

以下是 JavaScript 中几种常见的内置错误类型及其示例：

错误类型描述示例场景
ReferenceError访问未声明的变量console.log(undeclaredVariable)
TypeError操作与值的类型不兼容undefined.toString()
SyntaxError代码语法错误if (true) { console.log('hello')
RangeError参数值超出有效范围new Array(1e28)
URIError编码/解码 URL 时出错decodeURIComponent('%')

Throw：主动抛出错误

Throw 的基本语法

throw 是 JavaScript 中用于显式抛出错误的关键字。通过 throw，开发者可以手动触发错误，并传递自定义的错误信息或对象。其基本语法如下：

throw new Error('描述性错误信息');

抛出错误的场景

  1. 验证失败：例如，当函数参数不符合预期时抛出错误。
  2. 业务逻辑异常：例如，尝试从空栈中弹出元素时触发错误。
  3. 资源不可用：例如，API 调用返回无效数据时抛出错误。

Throw 的使用示例

function divide(a, b) {  
  if (b === 0) {  
    throw new Error('除数不能为零！');  
  }  
  return a / b;  
}  

try {  
  console.log(divide(10, 0));  
} catch (error) {  
  console.error(error.message); // 输出：除数不能为零！  
}

对比：Throw 与 Throw new Error

在 JavaScript 中，开发者可以直接 throw 任意值（如字符串、对象），但推荐使用 throw new Error() 的方式。后者的优势在于：

  • 继承 Error 对象：包含堆栈跟踪（stack trace），便于定位错误源。
  • 可扩展性：自定义错误类时，可以继承 Error 的功能。
// 不推荐的方式（丢失堆栈信息）  
throw '参数错误';  

// 推荐的方式  
throw new Error('参数错误');

Try 和 Catch：捕获与处理错误

Try/Catch 的基本结构

try/catch 是 JavaScript 中用于捕获运行时错误的语句组合。其语法如下：

try {  
  // 可能触发错误的代码块  
} catch (error) {  
  // 处理捕获到的错误  
} finally {  
  // 无论是否发生错误，都会执行的代码块（可选）  
}

关键点解析

  1. try 块：包含需要监控的代码。如果代码执行过程中抛出错误（无论是显式 throw 还是隐式运行时错误），程序会立即跳转到对应的 catch 块。
  2. catch 块：接收一个参数 error，该参数是捕获到的错误对象。开发者可以在其中记录错误、提供用户反馈或尝试修复问题。
  3. finally 块：无论是否发生错误，该代码块都会执行，常用于释放资源（如关闭数据库连接或文件流）。

Try/Catch 的实际案例

案例 1：文件读取与错误处理

function readFile(filename) {  
  try {  
    const fileContent = fs.readFileSync(filename, 'utf8');  
    return fileContent;  
  } catch (error) {  
    console.error(`读取文件 ${filename} 失败：${error.message}`);  
    return null;  
  } finally {  
    console.log('尝试关闭文件流...');  
  }  
}  

// 如果文件不存在，会触发错误并执行 catch 块  
readFile('nonexistent.txt');

案例 2：API 调用与错误分类处理

async function fetchUserData(userId) {  
  try {  
    const response = await fetch(`/api/users/${userId}`);  
    if (!response.ok) {  
      throw new Error(`HTTP 错误：${response.status}`);  
    }  
    return await response.json();  
  } catch (error) {  
    if (error.message.includes('404')) {  
      console.error('用户不存在');  
    } else {  
      console.error('网络请求失败:', error.message);  
    }  
  }  
}

错误处理的最佳实践

1. 避免过度捕获（Avoid Broad Catch Blocks）

不要在 catch 块中捕获所有错误而不做处理，这会掩盖潜在的严重问题。例如：

// 不推荐：空的 catch 块  
try {  
  dangerousCode();  
} catch (error) {  
  // 什么也不做，错误被吞没  
}

改进方式：至少记录错误信息：

try {  
  dangerousCode();  
} catch (error) {  
  console.error('发生未知错误:', error);  
}

2. 分层错误处理（Layered Error Handling）

在大型应用中，错误可能需要在不同层级（如业务层、服务层、UI 层）进行处理。例如：

// 服务层：抛出特定错误  
function calculateDiscount(price, discountRate) {  
  if (discountRate < 0 || discountRate > 1) {  
    throw new Error('折扣率必须在 0 到 1 之间');  
  }  
  return price * (1 - discountRate);  
}  

// 调用层：捕获并转换错误  
try {  
  const finalPrice = calculateDiscount(100, 1.5);  
} catch (error) {  
  if (error.message.includes('折扣率')) {  
    throw new Error('输入的折扣率无效，请检查参数');  
  }  
  // 其他错误上抛  
  throw error;  
}

3. 自定义错误类（Custom Error Classes）

通过继承 Error 类，可以创建具有特定属性或行为的错误类，便于分类处理：

class ValidationException extends Error {  
  constructor(message) {  
    super(message);  
    this.name = this.constructor.name;  
    this.statusCode = 400; // 自定义 HTTP 状态码  
    Error.captureStackTrace(this, this.constructor);  
  }  
}  

// 使用自定义错误  
function validateEmail(email) {  
  if (!email.includes('@')) {  
    throw new ValidationException('邮箱格式错误');  
  }  
}

4. 使用 finally 确保资源释放

无论是否发生错误，finally 块内的代码都会执行。例如：

let databaseConnection;  

try {  
  databaseConnection = connectToDatabase();  
  // 执行查询  
} catch (error) {  
  console.error('数据库操作失败:', error);  
} finally {  
  if (databaseConnection) {  
    databaseConnection.close();  
  }  
}

错误处理的进阶技巧

1. 错误堆栈分析（Error Stack Tracing）

错误对象的 stack 属性提供了详细的调用链信息，帮助开发者定位错误来源：

try {  
  throw new Error('示例错误');  
} catch (error) {  
  console.log(error.stack);  
}  

// 输出示例：  
// Error: 示例错误  
//     at file.js:5:9  
//     at ...

2. 异步错误处理（Handling Errors in Async Code）

在 async/await 语法中，错误需要通过 try/catch 捕获，而传统的 Promise 链则使用 .catch()：

// async/await 方式  
async function fetchData() {  
  try {  
    const response = await fetch('https://api.example.com/data');  
    return await response.json();  
  } catch (error) {  
    console.error('请求失败:', error);  
  }  
}  

// Promise 链方式  
fetch('https://api.example.com/data')  
  .then(response => response.json())  
  .catch(error => console.error('请求失败:', error));

3. 全局错误监听（Global Error Handling）

在浏览器环境中，可以监听全局的未捕获错误：

window.addEventListener('error', (event) => {  
  console.error('全局错误:', event.error);  
  // 发送错误报告到服务器  
});  

// 在 Node.js 中  
process.on('uncaughtException', (error) => {  
  console.error('未捕获的异常:', error);  
});

总结

通过掌握 JavaScript 错误 – Throw、Try 和 Catch，开发者能够系统化地应对代码中的异常情况，提升程序的健壮性。本文的核心要点可总结为以下几点：

  1. Throw 是主动抛出错误的工具，需配合 new Error() 以保留堆栈信息。
  2. Try/Catch 用于捕获并处理运行时错误，finally 块确保资源释放。
  3. 最佳实践 包括避免空 catch 块、分层处理错误、自定义错误类等。
  4. 进阶技巧 如分析堆栈、处理异步错误和全局监听，能进一步优化错误管理。

错误处理不仅是技术问题，更是开发者对代码质量的承诺。通过本文的讲解和案例，希望读者能够将这些知识应用到实际项目中，构建更可靠、更友好的应用程序。

最新发布

查看更多文章