← 返回目录

10. try/catch 异常捕获

程序出错时，浏览器会"拉响警报"（抛异常）。不处理警报，页面直接卡死/白屏。try/catch 就像给容易出错的代码铺了一层安全网：出错就接住，页面继续跑。

10.1 互动演示（三种异常捕获）

10.2 知识点讲解

① 哪些地方会"抛异常"？（三个典型场景）

// 场景 1：JSON 格式不对
// 记住：JSON 里键必须老老实实加双引号
JSON.parse('{name: "张三"}'); // 键 name 没加引号 → 浏览器直接报错

// 场景 2：往柜子里塞太多，超过约 5MB
localStorage.setItem("big", "x".repeat(6 * 1024 * 1024));
// → 浏览器喊：柜子满了！

// 场景 3：浏览器把本地存储关了（隐私模式或设置里禁了）
localStorage.setItem("a", "b");
// → 浏览器喊：不许存！

JSON.parse 解析后端返回的坏数据，是最常见的崩溃原因——接口一抽风，页面就白屏，说的就是没加 try/catch。

② try/catch 语法：逐行讲

try {
  // 把"可能会崩"的代码都塞进 try 这块里
  let arr = [10, 20, 30]; // 随便造个数组
  localStorage.setItem("list", JSON.stringify(arr)); // 打包存进去
} catch (err) {
  // 上面任何一行崩了，立刻跳到这里，err 就是那个错误
  // err.message 是浏览器给的人话描述
  console.log("存储失败：", err.message); // 打印出来看看咋回事
  alert("浏览器存储功能异常！"); // 提醒一下用户
}
// 接住了就没事，页面接着跑，不会白屏

规则就一句：try 里放"可能会崩"的代码，catch 里放"崩了怎么办"。没出错时 catch 不执行。

③ 更实用的防御写法：解析坏了给默认值

let user = null; // 先放空着
try {
  // 从柜子里读之前存的用户数据，拆包还原
  user = JSON.parse(localStorage.getItem("user"));
} catch (err) {
  // 万一数据坏了拆不开，就塞个默认用户顶上，别让页面崩
  user = { name: "默认用户" };
}
// 后面放心用 user.name，再坏也有个兜底，不会报错

"兜底默认值"是生产环境的标准写法：宁可给个假数据，也别让用户看到白屏。