JS try catch基本用法以及常见的异常处理

 更新时间:2025年04月02日 10:20:57   作者:一只蜗牛儿  
JS异常处理的作用是帮助开发者识别和处理运行时的错误和异常情况,确保程序在出现问题时能够优雅地降级或恢复,而不是导致整个应用崩溃或产生不可预测的行为,这篇文章主要介绍了JS try catch基本用法以及常见的异常处理,需要的朋友可以参考下

前言

在 JavaScript 中,异常处理是通过 try...catch 语句来实现的。异常处理机制用于捕获在程序执行过程中可能出现的错误,并做出相应的处理,避免程序因错误而崩溃。通过 try...catch,开发者可以控制代码的执行流程,使得代码更加健壮和容错。

本文将详细讲解 try...catch 的基本用法、进阶技巧以及常见的异常处理模式,帮助你更好地理解异常处理的应用场景。

一、基本语法

try...catch 的基本语法结构如下:

try {
  // 可能会抛出异常的代码块
} catch (error) {
  // 捕获到异常后执行的代码
}
  • try 块中包含可能抛出异常的代码。
  • catch 块会捕获 try 块中的异常,并且 catch 块会接受一个参数(通常命名为 error 或 e),用于表示捕获到的错误信息。

示例:

try {
  let num = 10;
  let result = num / 0;
  console.log(result); // Infinity
} catch (error) {
  console.log("An error occurred:", error);
}

上面的代码不会抛出错误,因为 JavaScript 中 num / 0 的结果是 Infinity,这在 JavaScript 中是合法的。因此 catch 语句不会被触发。

二、捕获并处理异常

在实际开发中,我们往往会遇到网络请求失败、用户输入错误等异常情况,这时候我们可以使用 try...catch 来捕获这些异常并进行处理。

示例:捕获除零错误

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("Division by zero is not allowed!");
    }
    return a / b;
  } catch (error) {
    console.log("Error:", error.message);
    return null;  // 返回 null 以表示错误
  }
}

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // Error: Division by zero is not allowed! null
  • throw 语句用于主动抛出错误,我们可以通过它自定义错误信息。
  • 捕获到错误后,可以在 catch 语句中处理,避免程序中断。

三、捕获多种类型的异常

有时我们希望根据不同的错误类型进行不同的处理。JavaScript 的 Error 对象支持自定义错误类型,可以通过判断错误类型来处理不同的异常。

示例:根据错误类型处理不同的异常

try {
  let user = null;
  if (!user) {
    throw new TypeError("User is not defined");
  }
} catch (error) {
  if (error instanceof TypeError) {
    console.log("TypeError caught:", error.message);
  } else {
    console.log("Other error caught:", error.message);
  }
}

在这个示例中,error instanceof TypeError 用于判断错误类型,并针对不同类型的错误执行不同的代码逻辑。

四、finally 语句

finally 语句块在 try...catch 语句的后面,用于指定无论是否发生异常都会执行的代码。即使 try 块中有异常被抛出,finally 也会被执行。

示例:使用 finally 释放资源

function fetchData(url) {
  let connection = null;
  
  try {
    connection = openConnection(url);  // 假设这是一个开连接的操作
    let data = connection.requestData();  // 假设这是一项网络请求操作
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
  } finally {
    if (connection) {
      connection.close();  // 确保无论如何都关闭连接
      console.log("Connection closed.");
    }
  }
}
  • finally 常用于清理操作,比如释放资源、关闭文件连接等。
  • 无论 try 块是否抛出异常,finally 中的代码都会执行。

五、异步代码中的错误处理

在处理异步代码时,try...catch 也非常有用,尤其是结合 async/await 使用时。

示例:结合 async/await 使用异常处理

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error("Fetching data failed:", error.message);
  }
}

fetchData();
  • 在异步函数中,await 用于等待异步操作的结果。如果异步操作发生异常,catch 会捕获到异常。
  • 使用 try...catch 来捕获 async 函数中的错误,避免代码崩溃。

六、重新抛出异常

在某些情况下,捕获到异常后,你可能希望重新抛出异常,以便其他地方的代码能够处理这个错误。可以使用 throw 语句将捕获的异常重新抛出。

示例:重新抛出异常

try {
  try {
    let num = 10;
    if (num > 5) {
      throw new Error("Number is too large");
    }
  } catch (error) {
    console.log("Handling error:", error.message);
    throw error; // 重新抛出异常
  }
} catch (error) {
  console.log("Caught the re-thrown error:", error.message);
}
  • throw error 语句将捕获到的异常重新抛出,使得外层 catch 可以继续处理。

七、总结

  • 基本用法: try...catch 用于捕获和处理程序中的异常。
  • 异常类型: 可以使用 throw 语句抛出自定义异常。
  • finally: 无论是否发生异常,finally 块都会执行,通常用于资源释放等操作。
  • 异步异常处理: 在 async/await 中,try...catch 同样适用,可以有效捕获异步操作中的错误。
  • 重新抛出异常: 可以在 catch 中重新抛出异常,让上层代码进行处理。

try...catch 语句是 JavaScript 异常处理的基础,了解其用法和各种应用场景,可以让我们写出更加健壮的代码,提高系统的容错能力。

到此这篇关于JS try catch基本用法以及常见的异常处理的文章就介绍到这了,更多相关JS try catch用法异常处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中的LHS和RHS分析详情

    JavaScript中的LHS和RHS分析详情

    这篇文章主要介绍了JavaScript中的LHS和RHS分析详情,​LHS​​是赋值操作即可以看做是在往内存中存储值,而​​RHS​​是取值操作,它是从内存中进行检索,下文更多相关资料介绍需要的小伙伴可以参考一下
    2022-04-04
  • uniapp如何使用uv-popup弹出框隐藏底部导航tabbar

    uniapp如何使用uv-popup弹出框隐藏底部导航tabbar

    文章介绍了如何在uniapp中使用uv-popup组件隐藏底部导航的tabbar,并提供了隐藏前和隐藏后的代码示例,感兴趣的朋友一起看看吧
    2025-02-02
  • JavaScript交换变量的常用方法小结【4种方法】

    JavaScript交换变量的常用方法小结【4种方法】

    这篇文章主要介绍了JavaScript交换变量的常用方法,结合实例形式总结分析了JavaScript交换变量的4种实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 深入理解JavaScript中的浮点数

    深入理解JavaScript中的浮点数

    下面小编就为大家带来一篇深入理解JavaScript中的浮点数。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 一个仿微博登陆邮箱提示框js开发案例

    一个仿微博登陆邮箱提示框js开发案例

    这篇文章主要为大家详细介绍了一个仿邮箱登录提示框js开发案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 公众号SVG动画交互实战代码

    公众号SVG动画交互实战代码

    这篇文章主要介绍了公众号SVG动画交互实战代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • js中如何复制一个对象并获取其所有属性和属性对应的值

    js中如何复制一个对象并获取其所有属性和属性对应的值

    如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢?下面有个不错的示例,大家可以看看
    2013-10-10
  • JS获得选取checkbox整行数据的方法

    JS获得选取checkbox整行数据的方法

    这篇文章主要介绍了JS获得选取checkbox整行数据的方法,涉及使用js对DOM节点的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • 微信小程序表单验证form提交错误提示效果

    微信小程序表单验证form提交错误提示效果

    这篇文章主要为大家详细介绍了微信小程序表单验证form提交错误提示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • javascript获取以及设置光标位置

    javascript获取以及设置光标位置

    本文介绍了javascript获取以及设置光标位置的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论