javascript错误如何处理_try catch语句如何使用?

发布时间 - 2026-01-09 00:00:00    点击率:
JavaScript运行时错误会中断脚本执行,需用try...catch显式捕获;catch接收Error实例,含message/name/stack属性;try仅支持同步代码,异步错误须在Promise或async函数内处理;finally总执行,适合清理但慎用return和throw。

JavaScript 错误会中断执行,必须显式捕获才能继续

未被 try...catch 捕获的运行时错误(比如 ReferenceErrorTypeError)会立即终止当前脚本执行,并抛出到全局。这意味着后续代码不会运行,除非你主动用 try...catch 拦截。

基本语法:只有 trycatch 是必需的

catch 块接收一个参数(通常叫 error),它是一个 Error 实例,包含 messagenamestack 等属性。不写 finallythrow 也没问题。

try {
  JSON.parse('{ "invalid": json }');
} catch (error) {
  console.log(error.name);    // SyntaxError
  console.log(error.message); // Unexpected token i in JSON at position 2
}
  • try 块里只能放同步代码;异步操作(如 fetchsetTimeout)内部抛错无法被外层 try...catch 捕获
  • 不要在 catch 里空着——至少打个 console.error(error),否则错误静默消失,调试极难
  • error 参数名不是关键字,可改写为 erre,但别省略(ES2019+ 虽允许省略参数,但会丢失错误对象)

异步错误不能靠外层 try...catch 捕获

fetch 失败、Promise.reject()async/await 中的 throw,都得在 Promise 链或 async 函数内处理。

async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (error) {
    console.error('加载失败:', error.message);
    return null;
  }
}
  • fetch 网络失败(如断网)会进 catch;但 HTTP 404、500 不会自动 reject,需手动检查 res.ok
  • Promise 构造函数里的同步错误(如 new Promise(() => { throw 'oops' }))会被捕获;但异步抛错(如 setTimeout(() => { throw 'oops' }))仍会变成未捕获异常

finally 不是可有可无的清理钩子

finally 块无论是否出错、是否 return、是否 throw 都会执行,适合关流、清定时器、重置 UI 状态。

let timer;
try {
  timer = setTimeout(() => { throw new Error('timeout') }, 1000);
  await doSomething();
} catch (error) {
  console.error(error);
} finally {
  clearTimeout(timer); // 保证执行
  document.body.classList.remove('loading');
}
  • finallyreturn 会覆盖 trycatch 中的 return 值——这点容易被忽略
  • 不要在 finally 里抛错,否则会吞掉原错误(除非你明确想替换错误)
  • 若只是做副作用(如日志、清理),finally 比在 trycatch 末尾各写一遍更可靠
真正麻烦的是跨上下文错误:iframe、Web Worker、addEventListener('error')、甚至 console.error 本身都可能漏掉。这些地方得单独监听,不能只依赖 try...catch


# javascript  # java  # js  # json  # ssl  # ai 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何在阿里云通过域名搭建网站?  如何在阿里云ECS服务器部署织梦CMS网站?  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  java获取注册ip实例  如何在腾讯云服务器上快速搭建个人网站?  微信小程序 闭包写法详细介绍  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  网站制作价目表怎么做,珍爱网婚介费用多少?  如何用wdcp快速搭建高效网站?  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  如何快速启动建站代理加盟业务?  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  简单实现jsp分页  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  如何用已有域名快速搭建网站?  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  如何正确选择百度移动适配建站域名?  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的,背景音乐、音效等?  JS实现鼠标移上去显示图片或微信二维码  jQuery中的100个技巧汇总  什么是javascript作用域_全局和局部作用域有什么区别?  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  进行网站优化必须要坚持的四大原则  Laravel如何配置和使用缓存?(Redis代码示例)  Laravel怎么调用外部API_Laravel Http Client客户端使用  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  如何在香港服务器上快速搭建免备案网站?  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  如何在万网ECS上快速搭建专属网站?  如何快速搭建高效WAP手机网站吸引移动用户?  微信小程序 五星评分(包括半颗星评分)实例代码  免费网站制作appp,免费制作app哪个平台好?  Android中AutoCompleteTextView自动提示  安克发布新款氮化镓充电宝:体积缩小 30%,支持 200W 输出  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  移动端脚本框架Hammer.js  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  JS中对数组元素进行增删改移的方法总结  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  如何用低价快速搭建高质量网站?  JavaScript如何实现音频处理_Web Audio API如何工作?