18.try catch 的使用

1.什么是try catch

Try-Catch 是 JavaScript 中用于错误处理的机制,让你能够优雅地处理可能出现的错误,而不是让程序崩溃。

因为在js发生了错误,如果没有捕获的话,后面的代码就不会执行,最重要的其实为了写出健壮的代码,而不是动不动代码就执行不下去了。

但是也不能滥用,很多地方明显没问题,就不需要使用。 下面是他的基本语法

javaScript 复制代码
try {
  // 可能出错的代码
} catch (error) {
  // 处理错误的代码
} finally {
  // 无论是否出错都会执行的代码(可选)
}
console.log('我会执行吗')

其中,其中只有finally 是可以省略的,如果你省略了catch,保留finally,就代表你的错误没有处理,最后面的一行我会执行吗? 就不会输出。

2.典型的例子

  1. 访问null的某个属性
javascript 复制代码
try {
  let obj = null;
  console.log(obj.name);  // 💥 这里会报错:Cannot read property 'name' of null
} catch (error) {
  console.log('捕获到错误:', error.message);
  // 输出: 捕获到错误: Cannot read property 'name' of null
}
console.log('程序没有崩溃,继续执行');
  1. 请求接口
javascript 复制代码
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const userData = await response.json();
    console.log('用户数据:', userData);
    return userData;
  } catch (error) {
    console.error('获取用户数据失败:', error.message);
    return null;  // 返回默认值
  }
}
  1. JSON 解析
javascript 复制代码
function parseConfig(configString) {
  try {
    const config = JSON.parse(configString);
    return config;
  } catch (error) {
    console.warn('配置解析失败,使用默认配置');
    return { theme: 'default', language: 'zh' };  // 默认配置
  }
}

// 使用
const config1 = parseConfig('{"theme": "dark"}');     // 正常解析
const config2 = parseConfig('无效的JSON');            // 返回默认配置
  1. 文件读取
javascript 复制代码
const fs = require('fs');

function readConfigFile(filePath) {
  try {
    const data = fs.readFileSync(filePath, 'utf8');
    return JSON.parse(data);
  } catch (error) {
    if (error.code === 'ENOENT') {
      console.log('配置文件不存在,创建默认配置');
    } else if (error instanceof SyntaxError) {
      console.log('配置文件格式错误');
    } else {
      console.log('读取配置文件时出错:', error.message);
    }
    return {};  // 返回空配置
  }
}

3.其他用法

a.嵌套使用

javascript 复制代码
try {
  console.log('外层开始');
  try {
    console.log('内层开始');
    throw new Error('内层错误');
  } catch (innerError) {
    console.log('内层捕获:', innerError.message);
    throw new Error('内层处理后重新抛出');  // 重新抛出给外层
  }
} catch (outerError) {
  console.log('外层捕获:', outerError.message);
}

对于嵌套来说,如果内层的catch 捕获内层的错误,外层的catch 捕获外层的错误,如果想要内层的错误给外层捕获,就要在内层的catch里面再将其抛出

b.可以根据错误的类型做一些其他事情

javascript 复制代码
try {
  // 一些可能出现多种错误的代码
  someComplexOperation();
} catch (error) {
  if (error instanceof TypeError) {
    console.log('类型错误:', error.message);
  } else if (error instanceof ReferenceError) {
    console.log('引用错误:', error.message);
  } else {
    console.log('其他错误:', error.message);
  }
}
相关推荐
web打印社区8 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
YiHanXii10 小时前
this 输出题
前端·javascript·1024程序员节
维他命Coco10 小时前
js常见开发学习
javascript
!win !11 小时前
分享二个实用正则
javascript·正则表达式
xw511 小时前
分享二个实用正则
javascript·正则表达式
刘新明198911 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
诚实可靠王大锤12 小时前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节
疯狂的沙粒12 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
jingling55512 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
你的电影很有趣12 小时前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节