一起分析JavaScript异常处理方式

轻辰君_9649

轻辰君_9649

2022-08-04

1835人浏览

转载

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于异常处理的相关问题,编写程序的过程难免会出现一些错误,通过这些产生的错误,我们可以学会如何避免遇到这样的情况,以及如何在下次做的更好,下面一起来看一下,希望对大家有帮助。

【相关推荐:javascript视频教程、web前端】

错误是编程过程的一部分。编写程序的过程难免会出现一些错误,通过这些产生的错误,我们可以学会如何避免遇到这样的情况,以及如何在下次做的更好。

在 JavaScript 中,当代码语句紧密耦合并产生错误时,继续使用剩余的代码语句是没有意义的。相反,我们试图尽可能优雅地从错误中恢复过来。JavaScript 解释器在出现此类错误时检查异常处理代码,如果没有异常处理程序,程序将返回导致错误的任何函数。

对调用堆栈上的每个函数重复此操作,直到找到异常处理程序或到达顶层函数,从而导致程序以错误终止,导致程序的崩溃。

一般来说,有两种处理方式:

  • 抛出异常 — 如果在运行时发生的问题无法得到有意义的处理,最好抛出它

function openFile(fileName) {
  if (!exists(fileName)) {
    throw new Error('找不到文件 ' + fileName)
  }
  // ...
}
  • 捕获异常 — 抛出的异常在运行时更有意义的地方被捕获和处理

try {
  openFile('../test.js')
} catch(e) {
  // 优雅地处理抛出的期望
}

让我们更详细地了解这些操作。

抛出异常

您可能会看到类似 ReferenceError: specs is not defined 这样的情况。这表示通过 throw 语句引发的异常。

语法

throw «value»
// 不要这样做
if (somethingBadHappened) {
  throw 'Something bad happened'
}

对可以作为异常抛出的数据类型没有限制,但 JavaScript 具有特殊的内置异常类型。其中之一是 Error,正如您在前面的示例中所看到的。这些内置的异常类型为我们提供了比异常消息更多的细节。

Error

Error 类型用于表示一般异常。这种类型的异常最常用于实现用户定义的异常。它有两个内置属性可供使用。

  • message — 作为参数传递给 Error 构造函数的内容。例如,new Error('This is an error message')。您可以通过 message 属性访问消息。

const myError = new Error('Error!!!')
console.log(myError.message) // Error!!!
  • stack — 该属性返回导致错误的文件的历史记录(调用堆栈)。堆栈顶部还包括 message,后面是实际堆栈,从最新/隔离的错误点开始,到最外部负责的文件。

Error: Error!!!
    at <anonymous>:1:1</anonymous>

注意:new Error('...') 在抛出之前不会执行任何操作,即 throw new Error('error msg')  将在 JavaScript 中创建一个 Error 实例,并停止脚本的执行,除非您对 Error 错误执行某些操作,例如捕获它。

捕捉异常

现在我们知道了什么是异常以及如何抛出它们,让我们讨论一下如何通过捕获它们来阻止它们破坏我们的程序。

try-catch-finally 是处理异常的最简单方法。

try {
  // 要运行的代码
} catch (e) {
  // 发生异常时要运行的代码
}
  
[ // 可选
  finally {
    // 无论发生异常都始终执行的代码
  }
]

在 try 子句中,我们添加了可能产生异常的代码。如果发生异常,则执行 catch 子句。

有时,无论代码是否产生异常,都需要执行代码,这时我们可以使用可选块 finally。

即使 try 或 catch 子句执行 return 语句,finally 块也将执行。例如,以下函数返回 'Execute finally',因为 finally 子句是最后执行的内容。

function foo() {
  try {
    return true
  } finally {
    console.log('Execute finally')
  }
}

我们在无法事先检查代码正确性的地方使用 try-catch。

const user = '{"name": "D.O", "age": 18}'
try {
  // 代码运行
  JSON.parse(params)
  // 在出现错误的情况下,其余的代码将永远无法运行
  console.log(params)
} catch (err) {
  // 在异常情况下运行的代码
  console.log(err.message) // params is not defined
}

如上所示,在执行代码之前,不可能检查 JSON.parse 以获得 stringify 对象或字符串。

注意:您可以捕获程序产生的异常和运行时异常,但无法捕获 JavaScript 语法错误。

try-catch-finally 只能捕获同步错误。如果我们尝试将其用于异步代码,那么在异步代码完成其执行之前,try-catch-finally 可能已经执行了。

如何处理异步代码块中的异常

回调函数

javascript-pro
javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家,适用于现代开发

下载

使用回调函数(不推荐),我们通常会收到两个如下所示的参数:

async function(code, (err, result) => {
  if (err) return console.error(err)
  console.log(result)
})

我们可以看到有两个参数:err 和 result。如果有错误,err 参数将等于该错误,我们可以抛出该错误来进行异常处理。

在 if (err) 块中返回某些内容或将其他指令包装在 else 块中都很重要。否则,您可能会遇到另一个错误。例如,当您尝试访问 result.data 时,result 可能未定义。

Promises

使用 promises 的 then 或者 catch,我们可以通过将错误处理程序传递给 then 方法或使用 catch 子句来处理错误。

promise.then(onFulfilled, onRejected)

也可以使用 .catch(onRejected) 而不是 .then(null, onRejected) 添加错误处理程序,其工作方式相同。

让我们看一个 .catch 拒绝 Promise 的例子。

Promise.resolve('1')
  .then(res => {
    console.log(res) // 1
    throw new Error('go wrong') // 抛出异常
})
.then(res => {
  console.log(res) // 不会被执行
})
.catch(err => { 
  console.error(err) // 捕获并处理异常 ——> Error: go wrong
})

使用 async/await 和 try-catch

使用 async/await 和 try-catch-finally,处理异常是轻而易举的事。

async function func() {
  try {
    await nonExistentFunction()
  } catch (err) {
    console.error(err) // ReferenceError: nonExistentFunction is not defined 
  }
}

如何处理未捕获的异常

现在我们已经很好地理解了如何在同步和异步代码块中执行异常处理,让我们回答本文最后一个待解决的问题 :我们如何处理未捕获的异常?

在浏览器中

我们可以使用 window.onerror() 方法来处理未捕获的异常。每当运行时发生错误时,该方法会在 window 对象上触发 error 事件。

onerror() 的另一个实用做法是:当站点中的图片或视频等数据加载出错时,可以用该方法触发某些操作。例如,提供一张加载出错时的图片,或显示一条消息。

@@##@@

在 Node.js 中

EventEmitter 模块派生的 process 对象可以订阅事件 uncaughtException。

process.on('uncaughtException', () => {})`

我们可以传递一个回调来处理异常。如果我们尝试捕获这个未捕获的异常,进程将不会终止,因此我们必须手动完成。

uncaughtException 仅适用于同步代码。对于异步代码,还有另一个称为 unhandledRejection 的事件。

process.on('unhandledRejection', () => {})

决不要尝试为基本 Error 类型实现 “捕获所有” 处理程序。这将混淆所发生的一切,并损害代码的可维护性和可扩展性。

关键要点

throw 语句用于生成用户定义的异常。在运行时,当 throw 遇到语句时,当前函数的执行将停止,控制权将传递给 catch 调用堆栈中的第一个子句。如果没有 catch 子句,程序将终止

JavaScript 有一些内置的异常类型,最值得注意的是 Error,它返回 Error 中的两个重要属性:stack 和 message。

try 子句将包含可能产生异常的代码,catch 子句会在发生异常时执行。

对于异步代码,最好使用 async/await 配合 try-catch 语句。

可以捕获未处理的异常,这可以防止应用程序崩溃。

不要觉得麻烦,异常处理可以帮助您提高代码的可维护性、可扩展性和可读性。

【相关推荐:javascript视频教程、web前端】

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

javascript

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Tailwind CSS 响应式布局怎么写
Tailwind CSS 响应式布局怎么写

Tailwind CSS 响应式布局通常从移动端样式写起,再用 sm、md、lg 等前缀调整不同屏幕宽度下的网格、间距和导航。本专题整理断点配置、Grid 与 Flex 自适应布局及常见溢出问题,帮助你逐步完成多设备适配。

2026.11.03

0

19

Tailwind CSS 常用类名怎么记
Tailwind CSS 常用类名怎么记

Tailwind CSS 类名很多,先按布局、间距、文字、颜色和状态分组记忆,再通过官方文档检索具体写法。本专题结合类名排序、动态拼接失效、自定义实用类等问题,帮助你建立常用类名的速查方法。

2026.11.03

0

12

码上飞入口地址合集
码上飞入口地址合集

本专题汇总了码上飞(CodeFlying)的官方入口地址合集,涵盖官网主站及网页版在线使用入口,支持注册登录后直接在线体验零代码AI应用生成。同时整理了APP端下载渠道与小程序入口,助你快速访问平台,通过自然语言描述需求即可生成应用、小程序或网站。

2026.11.03

0

10

Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

2026.11.02

20

14

Uvicorn使用教程
Uvicorn使用教程

本专题汇总了Uvicorn使用教程与启动运行指南,涵盖其作为Python ASGI服务器的定位与特点,以及命令行启动(uvicorn main:app --reload)、参数配置(host/port/workers)、程序内嵌运行与Gunicorn结合部署等核心用法。同时整理了热重载调试、日志配置与生产环境部署优化等技巧,助你快速掌握Uvicorn的运行与配置。

2026.11.02

20

17

Uvicorn安装配置教程
Uvicorn安装配置教程

本专题汇总了Uvicorn的安装配置教程与部署指南,涵盖通过pip安装Uvicorn、启动FastAPI/Starlette应用、开发模式热重载(--reload)及多进程工作模式配置等核心操作。同时整理了结合Gunicorn的生产部署方案、HTTPS与反向代理配置及性能调优技巧,助你快速完成Uvicorn服务的安装与上线部署。

2026.11.02

20

17

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

120

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

100

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

300

10

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习