Javascript错误处理

毋庸置疑的是,在程序设计中,错误处理是很重要的一个环节。不管水平多高的软件开发人员,都或多或少地难以避免写出逻辑不是特别严谨的代码。另一方面来说,当我们的写的代码中带有错误处理的逻辑时,当出现了错误时可以及时通知到用户,这会带来用户体验上的提升。作为开发人员,我们要知道如何处理Javascript错误。

try-catch语句

在Javascript中,通过try-catch语句来实现异常的处理。该语句作为标准的一部分,其语法规则如下:

`try {`

`.....`

`} catch (error) {`

`.....`

`}`

在使用时,我们可以将所有可能会抛出错误的代码放在try语句块中,在catch语句块中是对错误的处理。 当try块中出现错误时,就会退出try块,从而执行catch中的错误处理代码。在上面的语法规则中,可以发现catch接受一个错误对象error.在error中主要存在两个属性:name属性 和 message属性。

这里要注意的是,如果在try块中执行代码时遇到错误,出现错误的语句后面的语句都不会再被执行。如果想要不管有没有遇到错误都执行一些语句,那么可以把这些语句放在finally子句中。

finally子句

标准中还引入了另一个子句:finally语句。它是搭配try-catch语句的一个可选的语句。但是,一旦使用,无论try-catch语句块中包含什么代码,finally中的代码都会执行。

  • try中的代码正常执行,finally中的语句正常执行。

  • try中的代码执行过程中出错从而执行catch语句, finally中的语句正常执行。

  • try块中存在return语句,finally中的代码仍然正常执行。(只要包含finally语句,try-catch中的return都将被忽略!

Javascript中的错误类型

  • Error

基类型。其他的错误类型均继承自它。这个基类型的主要目的是供开发人员抛出自定义错误。

  • EvalError

由于使用eval函数引发的错误。

  • SyntaxError

语法错误。

image
  • TypeError

类型错误。当错误使用变量或对象时,会抛出该错误。

image
  • ReferenceError

引用错误。当引用一个不存在的对象或不存在的变量时会发生该错误。

image
  • RangeError

范围错误。数值超出范围时触发。比如一个数组元素的取值为负值,就会抛出该错误。

image
  • URIError

合理使用try-catch

当我们使用try-catch处理错误之后,浏览器就不会再对错误进行处理。浏览器如何处理错误,下面会讲到。使用try-catch的情况一般为try块中的代码是我们无法控制的,也就是说我们不能确定它会不会出现错误,如果出现错误,是哪种错误。 比如,我们使用了第三方库或是别人写的工具函数之类的,我们无法确定这些函数会不会有意无意地抛出一些错误。因此,在这种情况下使用try-catch来对使用的函数进行包裹,从而对可能出现的错误进行处理。

当我们明确知道代码会发生错误时,再使用try-catch就不是太合适了。而且,在上面我们也介绍了,Error对象是基类型,主要目的是用来抛出自定义错误。

Throw

在JS中,我们通过throw来抛出错误。而且,throw的使用情况为: 我们明确知道代码会发生错误的情况。 比如:

`function  test(arr)  {`

`// 此处应该传进来一个数组`

`alert(arr[0])`

`}`

对于这种情况,我们需要对参数arr进行一个处理。可以发现,我们在test函数里面,默认出进来的参数为数组,从而直接进行数组操作。但是如果传进来的不是数组呢? 肯定会出错。这就需要我们对参数进行一个判断,如果不是数组,则抛出一个错误。

`function  test(arr) {`

 `if (!Array.isArray(arr))`

 `throw  new  Error("test(): arr must be an Array instance ")`

`    alert(arr[0])`

`}`
  • 通过throw抛出的错误会被外层的catch语句块所捕获。如果没有catch语句块,则会被浏览器捕获,从而在浏览器控制台可以看到错误信息。

这里要注意,抛出的错误类型不一定非要是Error,也可以是上面所说的任何类型,甚至是自定义错误类型。

对于自定义错误类型,可以通过继承自Error来实现。

如何自定义错误类型

其实,我们可以不一定通过继承Error来实现自定义错误类型。

image
  • 使用继承的好处就是可以通过obj instanceof Error 来识别这个一个错误对象。
`class  MyError  extends  Error  {`

 `constructor(message) {`

 `super(message);`

 `this.name = "MyError"`

`}`

`}`

这样的话,我们就可以在catch中对其进行判断。

`try {`

`.....`

`} catch (error) {`

 `if (error instanceof  Error) {`

`    .................`

`    }`

`}`
`// 更多详细的内容建议参考: https://zh.javascript.info/custom-errors`

我们还可以在catch中通过throw来抛出错误。这种情况发生在: 我们在catch中对收到的error做一个筛选,如果是特定的错误,对其进行处理。否则,表明出现了未知错误,将它继续抛出去。

错误对象(error)

上面说了,catch语句会收到关于错误信息的error对象。该对象主要有以下两种属性:

  • Name 错误类型名称

  • Message 关于error的描述

还有其他的一些属性,根据浏览器的不同而有所不同。不过,最广泛使用和支持的是:

  • Stack 当前调用栈信息

Throw 与try-catch的说明

捕获错误是为了防止浏览器对其进行默认处理。抛出错误是为了提供错误发生的具体原因信息。

error事件

当代码中出现错误,而未使用try-catch进行捕获处理的情况下,浏览器会捕获到该错误。即: 任何没有通过try-catch处理的错误都会触发window的error事件。在任何浏览器中,onerror事件处理程序都不会接受一个event对象,相反,接受的是三个参数: message(错误信息), url(错误所在的URL) 和 line(行号)。

`window.onerror = function ( message, url, line ) {`

`........`

`}`

这里要注意的是,onerror事件只能通过上面的方式添加事件处理程序,不可以通过DOM2的addEventListener。

在事件处理程序中,通过return false可以阻止浏览器报告错误的默认行为。

`window.onerror = function (message, url, line ) {`

 `console.log(message)`

 `return  false;`

`}`

图像也支持error事件。只要图像的src指定的URL返回的图像格式不可被识别,就会触发error事件。但是他的事件处理程序会接收event对象。

常见错误类型

  • 数据类型错误

  • 其实就是指我们在编写代码的过程前没有确保使用的变量和函数参数的数据类型的正确性。因为JS是松散类型的,因此开发人员要编写适当的数据类型检测代码。要注意的一点是,当进行类型判断时,如果是基本类型,应该使用typeof来检测,而对象的值则应该使用instanceof来进行检测。

  • 类型转换错误

  • 这种错误比较常见的是== , === 和 if , while , for这些控制语句中的布尔条件判断。举一个常见的例子:

`function  test(arr, arr2)  {`

 `if (!arr2) {`

 `return arr;`

`}`

`}`
  • 我们想的是,如果不存在arr2,就返回arr。如果arr2为undefined,满足条件。如果arr2存在,且为0的话,仍然会以arr2不存在进行处理。显然,这里就出现了逻辑上的错误。因此,要加上合适的判断。
`if ( typeof arr2 === 'undefined' ) return arr`
  • 通信错误

  • 格式不正确的URL有关。

  • 服务器处理出现的错误。

错误上传服务器

很多时候,我们都需要把错误信息上传给服务器保存。那么,怎么上传就是一个问题。

正如上面所说,Image对象也会触发error事件,那么我们可以使用image的error事件。主要由以下几个好处:

  • 支持度高。几乎所有的浏览器都支持Image对象。

  • 可以避免跨域限制。

  • 记录错误的过程中出问题的概率较低。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352