17370845950

try...catch仅捕获同步错误，异步错误需在内部处理；捕获error前须校验类型避免报错；finally中抛错会覆盖原错误；fetch需检查res.ok以防HTTP错误被忽略。

try...catch 只能捕获同步错误

异步代码（比如 setTimeout、Promise、fetch）抛出的错误，不会被外层 try...catch 捕获。这是最常见的误用场景。

• 写法错误：

  try {
    setTimeout(() => {
      throw new Error('这个错误抓不到');
    }, 0);
  } catch (e) {
    console.log('永远不会执行');
  }

• 正确做法：在异步内部加 try...catch，或用 .catch() 处理 Promise 错误
• 对 async/await，必须在 await 所在的函数内用 try...catch 包裹 await 行

不要忽略 error 对象的类型和 message

catch 捕获的 error 不一定是 Error 实例，可能是字符串、数字，甚至 undefined（尤其在非严格模式下 throw 123）。

• 检查类型再访问 error.message，避免 Cannot read property 'message' of null
• 推荐写法：

  try {
    riskyOperation();
  } catch (err) {
    if (err && typeof err === 'object' && 'message' in err) {
      console.error('错误信息：', err.message);
    } else {
      console.error('未知错误：', err);
    }
  }

• 生产环境建议统一用 instanceof Error 判断，但注意自定义错误类也要继承 Error

finally 里别写可能抛错的逻辑

finally 块总会执行，但如果它自己抛出错误，会覆盖前面 try 或 catch 中的错误，导致原始错误丢失。

• 错误示例：

  try {
    throw new Error('原始错误');
  } catch (e) {
    console.log('处理中...');
  } finally {
    JSON.parse('{invalid}'); // 这个错误会冒泡出去，掩盖原始错误
  }

• 解决方案：在 finally 内部也加 try...catch，或确保只做清理操作（如关闭定时器、重置状态）
• 常见安全操作：调用 clearTimeout、abortController.abort()、设置 loading = false

Promise 和 async/await 的错误捕获要配对使用

async 函数返回的是 Promise，所以错误既可以用 try...catch 捕获，也可以用 .catch()，但不能混用不当。

• 错误写法：

  async function fetchUser() {
    return fetch('/api/user').then(res => res.json());
  }
  // 这里 catch 不到 fetch 或 json 解析错误，因为没 await
  try {
    fetchUser();
  } catch (e) {
    console.error(e); // 不会触发
  }

• 正确写法一（推荐）：

  async function fetchUser() {
    const res = await fetch('/api/user');
    return await res.json(); // await 两次，确保解析错误也被捕获
  }
  try {
    const user = await fetchUser();
  } catch (e) {
    console.error('请求或解析失败：', e);
  }

• 正确写法二（链式）：

  fetchUser().catch(e => console.error(e));

实际项目里最容易被忽略的是：fetch 成功返回 Response 对象不代表 HTTP 状态码是 2xx，res.ok 必须手动判断；否则 404、500 会被当成“成功”继续执行 res.json()，然后在解析阶段才抛错——这个延迟报错会让定位变难。