讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript错误处理如何优雅捕获异常【教程】

风涛吖_4679

风涛吖_4679

发布时间:2026-01-21 19:50:43

|

231人浏览过

|

来源于php中文网

原创

JavaScript异常捕获难点在于异步错误处理:try/catch仅捕获同步错误;Promise拒绝需用.catch()或async/await中try包裹await;全局未处理拒绝用unhandledrejection事件兜底;错误应自定义分类并结合业务语义决策重试、降级或中断。

javascript错误处理如何优雅捕获异常【教程】

JavaScript 中的异常捕获本身不难,难的是在真实项目里不漏掉异步错误、不吞掉有用堆栈、不误判 Promise 拒绝为“已处理”。try/catch 只对同步代码有效,而现代 JS 大量依赖 Promise、async/await 和事件回调,这些地方才是异常丢失的重灾区。

为什么 try/catch 抓不到 Promise 拒绝?

因为 Promise 的拒绝(reject)默认不是“抛出异常”,而是触发一个未处理的 rejection,浏览器或 Node.js 会等微任务队列清空后才报错——此时 try/catch 早已退出作用域。

常见错误写法:

try {
  Promise.reject(new Error('boom'));
} catch (e) {
  console.log('不会执行');
}

正确做法是显式处理 Promise 链:

立即学习“Java免费学习笔记(深入)”;

  • 用 .catch() 接住链尾拒绝
  • 在 async/await 函数中用 try/catch 包裹 await 表达式(注意:只对当前 await 有效)
  • 避免在 then() 回调里抛错却不接 catch(),否则变成 unhandledrejection

如何全局捕获未处理的 Promise 拒绝?

靠 window.addEventListener('unhandledrejection')(浏览器)或 process.on('unhandledRejection')(Node.js),但仅作兜底,不能替代主动处理。

关键点:

  • 该事件只触发一次,且无法阻止默认行为(如控制台报错)
  • 事件对象有 reason(错误对象)和 promise(被拒绝的 Promise 实例)
  • 不要在这里 throw 或 reject,否则可能引发二次事件
  • 适合做日志上报,不适合做业务恢复

示例(浏览器端):

JS X Monitor
JS X Monitor

X.com (Twitter) 账号监控自动化:定时抓取指定账号最新推文,发现新内容即时推送通知。

下载
window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  // 上报监控系统
  reportError(event.reason);
  // ⚠️ 不要写 event.preventDefault() —— 它无效
});

异步操作嵌套时,catch 该放在哪一层?

原则:谁启动异步,谁负责兜底;谁消费结果,谁决定错误走向。不要把所有 catch 堆在最外层。

典型陷阱:

  • 在 fetch 后直接 .json() 却没处理 json() 自身可能抛出的语法错误
  • 多个 await 连续调用,只在外层 try,导致中间某步失败后后续逻辑仍执行
  • 使用 Promise.all() 时,一个失败就全盘 reject,但你其实只想忽略个别失败 —— 改用 Promise.allSettled()

推荐结构:

async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    
    try {
      const data = await res.json(); // 可能 SyntaxError
      return data;
    } catch (e) {
      throw new Error('Invalid JSON response');
    }
  } catch (e) {
    // 统一处理网络、解析、业务逻辑错误
    logError(e);
    throw e; // 保持可追溯性,不静默吞掉
  }
}

错误对象本身该怎么构造和区分?

原生 Error 对象只有 message 和 stack,但真实场景需要类型、状态码、上下文数据。别只靠 instanceof 判断。

实操建议:

  • 自定义错误类继承 Error,添加 name、code、status 等字段
  • 避免用字符串匹配判断错误原因(如 e.message.includes('timeout')),改用 e.code === 'NETWORK_TIMEOUT'
  • 在日志中保留原始 cause(ES2022+ 支持 new Error(msg, { cause }))
  • 第三方库(如 Axios)的错误对象结构特殊,务必查文档,例如 error.response?.data 才是后端返回体

示例:

class ApiError extends Error {
  constructor(message, { code, status, details } = {}) {
    super(message);
    this.name = 'ApiError';
    this.code = code;
    this.status = status;
    this.details = details;
  }
}

真正难的不是写 catch,而是判断哪个错误该重试、哪个该降级、哪个该直接中断用户流程——这需要结合业务语义,而不是靠一套通用错误处理函数自动解决。

热门AI工具

更多
Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2175

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3402

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1136

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3919

2025.09.10

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1009

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3080

2023.10.25

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1798

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2824

2023.09.04

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn