前端Wiki/JavaScript/深入/ES6+ 与工程基础

错误处理 try catch

程序出错并不可怕，可怕的是错误没被处理、页面直接白屏。try...catch...finally 是捕获运行时错误的标准结构：try 放可能出错的代码，catch 拿到错误对象（err.name 类型、err.message 信息），finally 无论成败都执行（清理资源、关闭 loading）。

两个要点：一是 catch 只能捕获同步错误，异步回调里抛的错要靠 Promise 的 catch 或 async 函数里的 try/catch；二是可以用 throw new Error('原因') 主动抛错，把不合法的状态尽早暴露出来，比让错误数据流到下游再炸要好得多。常见错误类型有 TypeError（对 undefined 取属性）、SyntaxError（语法/JSON 解析失败）、ReferenceError（变量不存在）。

实战建议：网络请求、JSON.parse、外部输入解析这三类操作必须包 try/catch；错误信息要记录上下文（参数、接口地址），方便排查。

本节要点try/catch/finally 三段式；catch 只抓同步错误，异步错误靠 Promise catch 或 await 的 try/catch；throw 可主动抛错，JSON.parse 与请求必须捕获。

JavaScript

// 基本结构：try → catch → finally
try {
  const data = JSON.parse('{坏掉的 JSON');
  console.log(data);              // 不会执行到这里
} catch (err) {
  console.log('错误类型：', err.name);     // SyntaxError
  console.log('错误信息：', err.message);
} finally {
  console.log('finally：无论是否出错都执行');
}

// 主动抛出错误
function setAge(age) {
  if (typeof age !== 'number') {
    throw new TypeError('age 必须是数字');
  }
  return age;
}
try {
  setAge('十八');
} catch (err) {
  console.log('自己抛的错也要接住：', err.message);
}

// 典型的"必须捕获"场景：访问不存在对象的属性
try {
  const user = null;
  console.log(user.name);         // TypeError
} catch (err) {
  console.log('空指针类错误：', err.name);
}

🔗 相关词条Promise async await 网络请求异步同步函数

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读