怎样进行JavaScript错误处理_try catch和Promise.catch如何使用_技术教程

JavaScript错误处理需区分同步与异步：同步错误用try...catch捕获（如JSON解析、属性访问），异步Promise错误用.catch()或async/await+try...catch处理，二者不可互换；未捕获Promise错误需通过全局unhandledrejection监听防范；错误应分类判断后决定降级、修复或重抛。

JavaScript错误处理主要靠 try...catch 捕获同步错误，.catch() 处理异步 Promise 错误；两者不能互相替代，需根据执行时机选择使用。

同步错误用 try...catch 包裹

当代码可能立即抛出异常（比如 JSON 解析失败、访问 undefined 属性、调用不存在的方法），必须用 try...catch 主动捕获，否则会中断执行并抛到全局。

基本写法：

try {
  const data = JSON.parse('{"name": "Alice",'); // 缺少 } → SyntaxError
  console.log(data.name);
} catch (error) {
  console.error('解析失败：', error.message); // 输出具体错误信息
}

建议：

只包裹真正可能出错的最小代码块，避免把整个函数都包进去
不要忽略 catch 中的 error 参数，至少记录日志
可配合 finally 做清理工作（如关闭加载状态、释放资源）

Promise 异步错误用 .catch() 或 await + try...catch

Promise 内部的异常不会触发外层 try...catch，必须通过链式 .catch() 或 await 配合 try...catch 捕获。

两种常用方式：

链式 .catch()：适用于纯 Promise 风格

fetch('/api/user')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('请求或解析失败：', err.message));

async/await + try...catch：更接近同步写法，推荐在逻辑较复杂时使用

async function loadUser() {
  try {
    const res = await fetch('/api/user');
    const data = await res.json(); // 这里也可能出错（如非 JSON 响应）
    console.log(data);
  } catch (err) {
    console.error('加载用户失败：', err.message);
  }
}

注意未捕获的 Promise 错误

如果 Promise 被创建但没接 .catch()，也没被 await，错误会变成“未捕获的 Promise 拒绝”，控制台报黄警告，严重时影响稳定性。

防范方法：

每个 Promise 链末尾加上 .catch(console.error)（开发期）
监听全局事件捕获漏网之鱼：window.addEventListener('unhandledrejection', e => {...})
在 Node.js 环境中监听 process.on('unhandledRejection', ...)

错误分类与重抛场景

不是所有错误都要当场处理。有时需要判断错误类型，再决定是修复、降级还是向上抛出。

例如：

try {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return await res.json();
} catch (err) {
  if (err.name === 'TypeError') {
    console.warn('网络异常，尝试本地缓存');
    return getCachedData();
  }
  throw err; // 其他错误继续上抛
}

关键点：