聊聊Javascript中try catch的2个作用

程序是从上到下顺序执行的,同时可以通过一些控制语句来改变执行的路线,受控制语句影响下,程序最终的执行路线就是控制流。

js 里面的控制语句有 if、for、while、try catch 等,它们都会改变程序的走向。

程序是操作数据的,随着程序的运行,也就是控制流的前进而改变的数据叫做数据流。

很明显,数据流是依赖控制流的,程序分析里面的数据流分析也是要先做控制流分析。

比如这样一段代码:

const a = 1;
let b;

if (a === 1) {
    b = '1111';
} else {
    b = '2222';
}

因为 a 为 1,所以会执行到 b = '1111';,这就是控制流,也就是程序最终执行的代码,可以用来分析程序的走向,做一些死代码删除之类的优化。

而随着控制流的执行,b 会被赋值为 2222,这就是数据流,也就是值的变化的过程,可以用来分析某个语句的变量的值。

程序是针对不同数据做不同的处理,如果数据有错误,那么处理程序也就没法处理了,就会报错,会中断后续的控制流。比如数据为空、数据格式不对等等。这时候就要通过 try catch 做错误处理,也叫异常处理。

我们做异常处理有两个目的:

1、对出错的逻辑做一些兜底处理。

比如参数解析有错误的时候,在 catch 里赋一个默认值。这种错误处理之后就没必要再报出来了。这种情况下 try catch 也是作为逻辑的一部分,相当于 if else。

2、对报的错做更场景化的描述。

JS 的报错是 JS 引擎抛出的,比如调用了一个 null 对象的方法会报 TypeError,使用了未声明的变量会报

ReferenceError。而具体的 Error 是在不同场景下报出的,就有不同的含义:

如果这个对象是来自用户输入的,那就是用户输入的有错误,如果这个对象是从服务端获取的,那就意味着服务端返回的数据有错误。在不同的场景下,同一个 Error 会有更具体的含义,所以我们要做 try catch。然后抛出一个自定义的错误,包含有场景信息的错误描述。

这点很多库和框架做的都比较好,报出的错都是有具体的场景信息,甚至还有解决方式,而且还有的通过错误编号做了管理,可以通过 errorno 来查询解决方式。这种就是对错误做了自定义的处理。

而很多业务代码中报的错就并没有做这种处理,是直接把原生 Error 给报出来了。我们会通过异常监控平台来收集一些 throw 到全局的错误,而这些错误往往都是比较原始的信息,虽然带上了错误位置和堆栈,但还要通过看源码来定位问题。

比如报了一个对象为空的错误,但是我怎么知道这是什么对象为空,会是什么原因,怎么解决,有没有编号。

如果我们能够对各种错误 catch 之后 throw 出一些具体场景的自定义错误,那是不是就好的多了。这点第三方库都做得很好,而业务代码很少有人注重场景化的自定义错误。

当然,前端业务代码的用户是通过界面来使用该软件的,其实只要对各种错误做一些 UI 上的提示就可以。而库的代码是给开发者用的,那么就要对各种错误做场景化的描述,甚至给错误编号并给出解决方案。

但我觉得业务代码也应该像第三方库代码那样来对待错误,不要把没有啥意义的原生错误报出来,而是报一些有具体含义的自定义错误,这样排查和解决问题就会简单很多。

不过虽然场景化的自定义错误可以更好的帮助排查问题,那也一定是建立在对该段代码可能报的错误有把握的情况下。要是自己报出的错误信息和实际的错误原因不一样,反而会增加排查问题的难度,还不如把原生错误报出来。

总结

程序执行的流程是控制流,受控制语句影响,执行的过程中会改变数据,数据的变化叫做数据流,控制流和数据流是程序分析里面经常分析的两个方面。

错误会中断控制流,我们要对错误做一些处理,通过 try catch。

错误处理有两个目的:

一个是做一些兜底的处理,相当于 if else,不需要再把错误报出来。

一个是做对原生的 JS 错误做场景化的描述,创建一个有更具体信息的错误对象抛出来。

这点很多库做的很好,甚至还会给错误编号并给出解决方式。但业务代码其实很多只做了给用户的 UI 上的反馈,没有对抛出的错误做场景化的包装。这就导致了错误监控平台收集到的错误都是比较原始的错误,需要查看源码来排查。如果也能像库的代码那样做一些场景化的错误包装,统计和排查起问题来会容易很多,这点大多数 Javascript 工程师都没做到。

到此这篇关于Javascript中try catch作用的文章就介绍到这了,更多相关Javascript中try catch作用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS异常处理try..catch语句的作用和实例

    首先一个常识就是,在浏览器执行JS脚本过程中,当出现脚本错误,并且你没有手动进行异常捕捉时,他会在浏览器下面出现黄色的叹号,这是正常的,这也不是最重要的,最重要的是,出错行以下的所有JS代码将中停执行,这是我们不希望看到的,所以说,对于自己写的,拿不准的脚本还是加上异常捕捉比较好. 1 清除黄色叹号: 复制代码 代码如下: window.onerror={return true;}  //这只是表面清除了错误,但JS代码将被中停 2 为容易出错的,容易产生兼容问题的代码段加上try..catch

  • JavaScript语句错误throw、try及catch实例解析

    try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行. JavaScript 抛出(throw)错误 当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息. 描述这种情况的技术术语是:JavaScript 将抛出一个错误. JavaScript try 和 catch try 语句允许我们定义在执行时进行错误测试的代码块. cat

  • JS中用try catch对代码运行的性能影响分析

    前言 之前一直没有去研究try catch对代码运行的性能影响,只是一直停留在了感觉上,正好最近开会交流学习的时候,有人提出了相关的问题.借着周末,正好研究一番. 前端线上脚本错误的捕获方法: window.JSTracker=window.JSTracker||[]; try{ //your code }catch(e){ JSTracker.push(e); throwe;//建议将错误再次抛出,避免测试无法发现异常 } 设计实验方式 简单的设计方案也就是对比实验. 空白组1:[无 try

  • 理解javascript中try...catch...finally

    本文为大家分析了javascript中try...catch...finally的使用方法,分享给大家供大家参考,具体内容如下 稍微复杂一点点,就要用到判断语句,if else进行条件判断,话说if条件else否则,这样的判断对于写程序代码的码侬已经是非常熟悉不过了. 如果你觉得这个也很简单,可能会用到混合if else条件判断语句加上try catch 来处理语句,虽然用try catch能处理任何的对象,通过throw扔一条有错误的语句,接着catch抛出该对象或者该对象的错误,今天我们只说

  • 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

  • javascript中 try catch用法

    先看个实例 <input id='b1' type='button' value='按钮'/> <script> window.onload=function(){ var oBtn=document.getElementById("b1"); function mto(){ alert("123"); }; try //非IE { oBtn.attachEvent("onclick",mto,false); } catc

  • 实例解析js中try、catch、finally的执行规则

    try:  语句测试代码块的错误,一般把可能会出错的代码放到这里 catch: 只有try里面的代码块发生错误时,才会执行这里的代码,参数err记录着try里面代码的错误信息 finally: 无论有无异常里面代码都会执行 try{ console.log(0); }catch (err){ console.log(1); console.log(hello); }finally { console.log(2); } //最后结果分别打印出 0 2 /* try{ a.b.c(); }catc

  • javascript 中的try catch应用总结

    javascript 中的try catch应用总结 实例代码: <script language="JavaScript"> try { throw new Error(10,"asdasdasd") } catch (e) { alert(e.message); alert(e.description) alert(e.number) alert(e.name) throw new Error(10,"asdasdasd") }

  • JavaScript Try...Catch 声明的 使用方法

    try...catch的作用是测试代码中的错误. 实例 try...catch声明  如何编写try...catch声明.  带有确认框的try...catch声明  另一个编写try...catch声明的例子. JavaScript - 捕获错误 当我们在网上冲浪时,总会看到带有runtime错误的Javascript警告框,同时会询问我们"是否进行debug?".像这样的错误信息或许对开发人员有用,对用户则未必.当错误发生时,他们往往会选择离开这个站点. 本节向你讲解如何捕获和处理

随机推荐