• 【转】详解JavaScript中的异常处理方法


    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:
    语法错误:

    语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时。

    例如,下面一行将导致一个语法错误,因为它缺少一个右括号:

    <script type="text/javascript">
    <!--
    window.print(;
    //-->
    </script>
    
    

    当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响,在其他线程的代码被执行;代码依赖于包含错误的代码不会被执行。
    运行时错误:

    执行(编译/解释后)在运行时错误,也被称为异常,会引发。

    例如,下面一行将导致运行时错误,因为这里的语法是正确的,但在运行时它正试图调用非存在的方法:

    <script type="text/javascript">
    <!--
    window.printme();
    //-->
    </script>
    
    

    例外情况也影响到它们发生的线程,允许其他JavaScript线程继续正常执行。
    逻辑错误:

    逻辑错误可能是最困难的类型的错误跟踪。这些错误是不是一个语法或运行时错误的结果。相反,当发生一个错误的驱动脚本逻辑,你没有得到所期望的结果。

    你可能无法抓到这些错误,因为这取决于程序是什么类型的逻辑是基于业务需求。
    try...catch...finally 语句:

    JavaScript的最新版本中添加的异常处理能力。JavaScript实现 try ... catch... finally结构以及抛出操作来处理异常。

    你可以捕获程序员生成和运行时异常,但不能捕获JavaScript语法错误。

    这里是 try...catch...finally 块语法:

    <script type="text/javascript">
    <!--
    try {
      // Code to run
      [break;]
    } catch ( e ) {
      // Code to run if an exception occurs
      [break;]
    }[ finally {
      // Code that is always executed regardless of 
      // an exception occurring
    }]
    //-->
    </script>
    
    

    try块必须后跟只有一个catch块或者一个finally块(或两者之一)。当一个异常在try块时,除被放置在e和catch块被执行。 try/catch语句后的可选finally块无条件地执行。
    示例:

    下面是一个例子,我们正试图调用一个不存在的函数,这将引发异常。让我们来看看它的行为,不具有try ... catch:

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function myFunc()
    {
      var a = 100;
    
      alert("Value of variable a is : " + a );
     
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click the following to see the result:</p>
    <form>
    <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
    </body>
    </html>
    
    

    现在,让我们尝试使用 try ... catch 捕获这个异常,并显示一个用户友好的消息。也可以取消此消息,如果要隐藏从用户这个错误。

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function myFunc()
    {
      var a = 100;
      
      try {
       alert("Value of variable a is : " + a );
      } catch ( e ) {
       alert("Error: " + e.description );
      }
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click the following to see the result:</p>
    <form>
    <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
    </body>
    </html>
    
    

    可以使用finally块将永远try/catch语句后,无条件地执行。下面是一个例子:

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function myFunc()
    {
      var a = 100;
      
      try {
       alert("Value of variable a is : " + a );
      }catch ( e ) {
       alert("Error: " + e.description );
      }finally {
       alert("Finally block will always execute!" );
      }
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click the following to see the result:</p>
    <form>
    <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
    </body>
    </html>
    
    

    throw 语句:

    可以使用throw语句来提高你的内置异常或自定义异常。后来这些异常可以被捕获并可以采取适当的行动。

    以下是表示throw语句的用法的例子。

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function myFunc()
    {
      var a = 100;
      var b = 0;
      
      try{
       if ( b == 0 ){
         throw( "Divide by zero error." ); 
       }else{
         var c = a / b;
       }
      }catch ( e ) {
       alert("Error: " + e );
      }
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click the following to see the result:</p>
    <form>
    <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
    </body>
    </html>
    
    

    您可以使用字符串,整数,布尔或对象在一个函数抛出一个异常,那么可以捕捉例外在相同的函数,我们在上面做了,或者使用try ... catch块在其他的函数。
    onerror() 语法

    onerror事件处理程序是第一个特点,方便JavaScript处理错误。错误事件被触发窗口对象,每当一个异常页面上出现。例如:

    <html>
    <head>
    <script type="text/javascript">
    <!--
    window.onerror = function () {
      alert("An error occurred.");
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click the following to see the result:</p>
    <form>
    <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
    </body>
    </html>
    
    

    onerror事件处理程序提供了三条信息,以找出错误的确切性质:

    1.     错误消息 . 浏览器将显示给定的错误相同的消息
    2.     URL . 在发生错误的文件
    3.     行号. 在导致错误的URL给出的行号

    这里是例子来说明如何提取此信息

    <html>
    <head>
    <script type="text/javascript">
    <!--
    window.onerror = function (msg, url, line) {
      alert("Message : " + msg );
      alert("url : " + url );
      alert("Line number : " + line );
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click the following to see the result:</p>
    <form>
    <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
    </body>
    </html>
    
    

    可以显示在任何方式,你觉得这是更好的提取信息。

    可以使用onError方法来显示错误消息的情况下没有在如下加载图像的任何问题:

    <img src="myimage.gif"
      onerror="alert('An error occurred loading the image.')" />
    
    

    可以使用的onerror许多HTML标记错误的情况下显示相应的信息。

    您可能感兴趣的

    1. 详解1000+项目数据分析出来的10大JavaScript错误
    2. 10个用Console来Debug的高级技巧
    3. 有浏览器的地方就有Fundebug
    4. Debug前端HTML/CSS
  • 相关阅读:
    js 手写 map 函数
    前端 实现 opensearch功能 (umi项目中如何实现)
    react 中 Link 标签 重新打开一个新的浏览器窗口
    umi 框架 如何配置 自定义 插件 和 loader
    webpack 自定义 plugin ?
    webpack 自定义 loader ?
    webpack 基础篇 ?
    webpack 是什么 ?
    http 状态码总结
    前端炒鸡好用的库推荐 (欢迎补充交流)
  • 原文地址:https://www.cnblogs.com/curationFE/p/handle_javascript_exception.html
Copyright © 2020-2023  润新知