JS中异常抛出和处理方法图文详解

目录
  • 抛出异常
  • 抛出的表达式类型
    • 基本数据类型
    • 对象
    • 类的实例对象
    • Error 类的实例对象
    • Error 的子类
  • 处理异常
  • js中常见的系统异常:
  • 总结

抛出异常

在 js 中,有时候我们需要处理一些异常或错误。比如编写的某个函数所接收的参数要求是 Number 类型的,如果在该函数被调用时传入的是字符串,就需要发出提醒。此时我们可以使用 throw 语句来抛出个异常:

// 例 1
function fn(num) {
  if (typeof num !== 'number') throw '需传入数字'
  console.log(num) // 不会打印
}

fn('0')
console.log('不会执行')

执行例 1 的代码结果如下:

因为第 7 行传入的是字符串,所以会导致第 3 行 throw 语句的执行,那么在函数 fn 内,之后的语句就不会执行了,这点和 return 一样。因为我们没有对第 7 行的 fn 函数的执行做异常捕获的操作,所以程序终止,其后的第 8 行也不会执行。

抛出的表达式类型

基本数据类型

例 1 中我们就是是抛出了一个基本数据类型 —— 字符串,当然还可以是数字等其它基本类型的数据。

对象

我们也可以抛出一个对象,这样可以传递更多的信息:

// 例 1.1
function fn(num) {
  if (typeof num !== 'number')
    throw {
      code: -1,
      msg: '类型错误'
    }
  console.log(num)
}

类的实例对象

如果每次抛出异常我们都像例 1.1 这样写个对象会比较繁琐,所以可以创建一个类,比如例 1.2 的 myError,帮我们创建包含了错误信息的对象:

// 例 1.2
class myError {
  constructor(code, msg) {
    this.code = code
    this.msg = msg
  }
}
function fn(num) {
  if (typeof num !== 'number') throw new myError(-1, '类型错误')
  console.log(num)
}

这样执行 fn 时,如果不做异常捕获就会打印如下的报错信息:

Error 类的实例对象

事实上我们并不需要自己定义一个类来创建错误对象,js 本身就为我们提供了这么一个类 Error,构建错误对象时传入错误的描述信息即可:

// 例 1.3
function fn(num) {
  if (typeof num !== 'number') throw new Error('类型错误')
  console.log(num)
}

fn('0')

在 node 中执行例 1.3,得到的结果会比我们自己定义的 myError多出函数的调用栈的信息:

我们可以直接通过 Error 实例对象的 stack 属性查看调用栈,还有 messagename

// 例 1.3.1
function fn(num) {
  if (typeof num !== 'number') {
    const err = new Error('类型错误')
    console.log('name:', err.name)
    console.log('message:', err.message)
    console.log('stack:', err.stack)
    throw err
  }
  console.log(num)
}
fn('0')

在 node 中执行例 1.3.1,第 5 ~ 7 的输出结果如下:

如果我们对例 1.3 进行些改造,不直接执行 fn('0') 而是让它在 bar 函数内被调用,然后在 foo 函数内调用 bar ,最后执行 foo()

// 例 1.3.2
function fn(num) {
  if (typeof num !== 'number') throw new Error('类型错误')
  console.log(num)
}
function foo() {
  bar()
}
function bar() {
  fn('0')
}
foo()

就可以看到调用栈信息又多了 2 条:

Error 的子类

Error 还有几个子类,比如上面的这些例子,因为属于类型错误,所以可以用更具体的 TypeError 类来生成错误对象:

// 例 1.4
function fn(num) {
  if (typeof num !== 'number') throw new TypeError('类型错误')
  console.log(num)
}
fn('0')

另外还有诸如引用错误 ReferenceError 和语法错误 SyntaxError 等。

处理异常

若一个异常被抛出而最终没有被捕获,那么会导致程序的终止执行。之所以加了“最终”两个字,是因为如果函数执行时抛出的异常没有被处理,异常会传递给执行了该函数的函数调用。以例 1.3.2 为例,第 10 行执行 fn('0') 导致抛出了异常,我们又没有在第 10 行对fn('0') 进行异常捕获,那么异常就会传给第 7 行的 bar(),再传给第 12 行,也就是最顶层的 foo(),此时还是没有对异常进行处理,才会导致报错并终止程序的运行。 只要我们在异常传递过程中的任何一处用 try...catch 语句对异常进行了捕获,比如下面的例 2,那么程序就不会被终止,异常会作为参数传递给 catch 子句,也就是第 15 行的 error

// 例 2
function fn(num) {
  if (typeof num !== 'number') throw new Error('类型错误')
  console.log(num) // 不会执行
}
function foo() {
  bar()
}
function bar() {
  fn('0')
}
try {
  foo()
  console.log('我不会继续执行')
} catch (error) {
  console.log('error:', error.message)
} finally {
  console.log('我无论是否有异常抛出都会执行')
}
console.log('我会继续执行')

执行例 2 的结果如下:

可以看到例 2 第 17 行还有个 finally 子句,无论是否有异常抛出或捕获它总是执行。

P.S. 从 ES10(ES2019)开始,第 15 行的 catch 子句可以省略掉 (error),也就是不去获取错误信息。

js中常见的系统异常:

  • EvalError: raised when an error occurs executing code in eval()   当一个错误发生在()执行的代码
  • RangeError: raised when a numeric variable or parameter is outside of its valid range  当一个数值变量或参数超出其有效范围时引发的
  • ReferenceError: raised when de-referencing an invalid reference  无效的饮用
  • SyntaxError: raised when a syntax error occurs while parsing code in eval()  当发生语法错误在()解析代码,而
  • TypeError: raised when a variable or parameter is not a valid type  当一个变量或参数不是一个有效的类型时引发
  • URIError: raised when encodeURI() or decodeURI() are passed invalid parameters  当encodeuri()或decodeuri()传递了无效的参数

注:上面的六种异常对象都继承自Error对象:

try {
  throw new Error("Whoops!");
} catch (e) {
  console.log(e.name + ": " + e.message);
}

总结

到此这篇关于JS中异常抛出和处理方法的文章就介绍到这了,更多相关JS异常抛出与处理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-11

javascript中的try catch异常捕获机制用法分析

本文实例讲述了javascript中的try catch异常捕获机制用法.分享给大家供大家参考,具体如下: 1.跟Java一样,JavaScript也具有try catch块,进行异常捕获的机制. (1)典型的try catch语句 try{ } catch{ } finally{ } 跟java中一样,JS中最为典型的try catch语句也同样分为了三个部分,try用于捕获异常,catch用于处理异常,而finally用于关闭资源等后续操作. 举例: try{ throw "error&qu

js中的异常处理try...catch使用介绍

在JavaScript可以使用try...catch来进行异常处理.例如: 复制代码 代码如下: try { foo.bar();} catch (e) { alert(e.name + ": " + e.message);} 目前我们可能得到的系统异常主要包含以下6种: EvalError: raised when an error occurs executing code in eval() RangeError: raised when a numeric variable o

js异常捕获方法介绍

复制代码 代码如下: <script type="text/javascript"> try{ ...some code... }catch(e){ ...some code... //处理错误 throw(e.name); //抛出异常 }finally{<BR> // 完成后执行的语句块,非必须<BR>} </script> javascript Error 对象: name: 错误名称number: 错误号description:

详解JavaScript中的异常处理方法

有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误: 语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个语法错误,因为它缺少一个右括号: <script type="text/javascript"> <!-- window.print(; //--> </script> 当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响

详解js前端代码异常监控

阅读目录 什么是前端代码异常 window.onerror 写一个js报错的上报库 注意点: 缺点: 在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发 现,那就可能造成很大的损失了.如果我们前端可以监控到这种报错,并及时上报的话,那我们的问题就比较好解决了.所以我们今天来聊聊前端代码的异常监控 什么是前端代码异常  一般语法错误以及运行时错误,浏览器都会在console里边体现出错误信息

JS中的异常处理方法分享

js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要不用户体验不好) 复制代码 代码如下: window.onerror=function(){return true;} 下面是为了获取js异常信息,方便开发者找回问题 1,try...catch... 复制代码 代码如下: <script type="text/javascript">var txt=""function message(){try   {   adddlert

javascript 异常处理使用总结

JavaScript中的异常可以用try..catch..finally语句来处理,也可以手动的来抛出异常. 1.使用try..catch..finally语句来处理异常 js代码在执行过程中如果出现异常,会手动创建一个异常类对象,该异常类对象将被提交给浏览器,这个过程称为"抛出异常".当浏览器接收到一场对象时,会寻找能处理这一异常的代码并把当前异常对象提交给其处理,这一过程被称为"捕获异常".try..catch..finally语句的基本语法格式为: 复制代码

JavaScript 异常处理 详解

前端工程师都知道 JavaScript 有基本的异常处理能力.我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常.但估计绝大多数前端工程师都没考虑过收集这些异常信息 反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就

javascript异常处理实现原理详解

这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是例外处理 当 JavaScript程序在运行中发生了诸如数组索引越界.类型不匹配或者语法错误时,JavaScript解释器就会引发例外处理. ECMAScript定义了六种类型的错误,除此之外,我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息. 通过运用例外处理技术,我们可以实现用结构化的方式来响应错误事

浅谈JavaScript异常处理语句

程序运行过程中难免会出错,出错后的运行结果往往是不正确的,因此运行时出错的程序通常被强制中止.运行时的错误统称为异常,为了能在错误发生时得到一个处理的机会,JavaScript提供了异常处理语句.包含try-catch.try-catch-finally和throw. try-catch语句 try{ tryStatements } catch(exception){ catchStatements } 参数说明: tryStatements:必选项.可能发生错误的语句序列. exception

JS高级调试技巧:捕获和分析 JavaScript Error详解

反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码避免影响用户体验. 捕获异常的方式 我们自己写的 throw new Error() 想要捕获当然可以捕获

捕获和分析JavaScript Error的方法

如何捕获和分析 JavaScript Error 前端工程师都知道 JavaScript 有基本的异常处理能力.我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常.但估计绝大多数前端工程师都没考虑过收集这些异常信息.反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比

php5 and xml示例

http://trash.chregu.tv/phpconf2003/examples/ PHP5的XML新特性 作者 Christian Stocker 翻译 ice_berg16(寻梦的稻草人) 面向的读者 这篇文章的面向对象是所有对PHP5的XML新功能感兴趣的各个水平的PHP开发者.我们假定读者掌握XML的基本知识.然而,如果你已经在你的PHP当中使用了XML,那么这篇文章也会让你受益非浅. 介绍 在当今的互联网世界,XML已经不再是一个时髦词了,它已经被广泛的接受和规范的使用了.因此相

PHP5的XML新特性

面向的读者 这篇文章的面向对象是所有对PHP5的XML新功能感兴趣的各个水平的PHP开发者.我们假定读者掌握XML的基本知识.然而,如果你已经在你的PHP当中使用了XML,那么这篇文章也会让你受益非浅. 介绍 在当今的互联网世界,XML已经不再是一个时髦词了,它已经被广泛的接受和规范的使用了.因此相对于PHP4,PHP5对于XML的支持更受到了重视.在PHP4中你面对的几乎都是非标准,API中断,内存泄漏以及其它不完全的功能.尽管有些不足已经在PHP4.3中得到改进,开发者们还是决定抛弃原有的代

javascript编程异常处理实例小结

本文实例总结了javascript编程异常处理的方法.分享给大家供大家参考,具体如下: 前言:在前一篇<asp.net开发中常见公共捕获异常方式总结>,我们整理总结了asp.net服务端的异常处理.这一篇接着前文,简单总结并讨论一下javascript在客户端的异常处理.这样asp.net的服务端和客户端异常处理我们就都有了初步的认识. 1.烦人的脚本错误 楼猪经常装13,但是普遍都没有深度.偶然艰难地看懂了一段英文,终于可以深沉地再装一回: When browsing Web pages o

javascript中异常处理案例(推荐)

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // cache 缓存 // try-catch-finall