Error Handling

优质

小牛编辑

140浏览

2023-12-01

编程中有三种类型的错误:（a）语法错误，（b）运行时错误，以及（c）逻辑错误。

语法错误

语法错误，也称为parsing errors,在传统编程语言的编译时和JavaScript中的解释时发生。

例如，以下行导致语法错误，因为它缺少右括号。

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

当JavaScript中出现语法错误时，只有与语法错误包含在同一线程中的代码才会受到影响，而其他线程中的其余代码将被执行，假设它们中的任何内容都不依赖于包含错误的代码。

运行时错误

运行时错误（也称为exceptions,在执行期间（编译/解释之后）发生。

例如，以下行导致运行时错误，因为此处语法正确，但在运行时，它尝试调用不存在的方法。

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

异常也会影响它们发生的线程，允许其他JavaScript线程继续正常执行。

逻辑错误

逻辑错误可能是最难追踪的错误类型。这些错误不是语法或运行时错误的结果。相反，当你在驱动你的脚本的逻辑中犯了错误并且你没有得到你期望的结果时，它们会发生。

您无法捕获这些错误，因为它取决于您的业务需求，您希望在程序中放置哪种类型的逻辑。

try...catch...finally 语句

最新版本的JavaScript增加了异常处理功能。 JavaScript实现了try...catch...finally构造以及throw运算符来处理异常。

您可以catch程序员生成的和runtime异常，但是您无法catch 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块。

例子 (Examples)

这是一个我们试图调用一个不存在的函数的例子，而这个函数又引发了异常。让我们看看没有try...catch它的表现如何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语句来引发内置异常或自定义异常。稍后可以捕获这些异常，您可以采取适当的措施。

例子 (Example)

以下示例演示如何使用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块在另一个函数中捕获该异常。

The onerror() Method

onerror事件处理程序是第一个促进JavaScript中的错误处理的功能。只要页面发生异常，就会在窗口对象上触发error事件。

<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事件处理程序提供三条信息来识别错误的确切性质 -

Error message - 浏览器将针对给定错误显示的相同消息
URL - 发生错误的文件
Line number - 给定URL中导致错误的行号

以下是显示如何提取此信息的示例。

例子 (Example)

<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.')" />

您可以使用带有许多HTML标记的onerror来显示错误时的相应消息。