Javascript - 错误处理

Javascript - 错误处理 首页 / JavaScript入门教程 / Javascript - 错误处理

编程中存在三种错误:(a)语法错误,(b)运行时错误和(c)逻辑错误。

语法错误

语法错误(也称为解析错误)在传统编程语言的编译时和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 构造以及 throw 运算符来处理异常。

这是 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 块。可选的 finally 块在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>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-error-handling.html

来源:LearnFk无涯教程网

现在,尝试使用 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>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-error-handling.html

来源:LearnFk无涯教程网

您可以使用 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>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-error-handling.html

来源:LearnFk无涯教程网

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>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-error-handling.html

来源:LearnFk无涯教程网

onerror()方法

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>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-error-handling.html

来源:LearnFk无涯教程网

onerror 事件处理程序提供了三段信息,以识别错误的确切性质-

  • Error message  -  对于给定的错误,浏览器将显示的相同消息

  • URL                   -   发生错误的文件

  • Line number     -   给定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>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-error-handling.html

来源:LearnFk无涯教程网

您可以以您认为更好的任何方式显示提取的信息。

您可以使用如下所示的 onerror 方法来显示错误消息,以防加载图像时出现任何问题。

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

您可以将 onerror 与许多HTML标签一起使用,以在发生错误时显示适当的消息。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

趣谈网络协议 -〔刘超〕

持续交付36讲 -〔王潇俊〕

Elasticsearch核心技术与实战 -〔阮一鸣〕

分布式技术原理与算法解析 -〔聂鹏程〕

动态规划面试宝典 -〔卢誉声〕

Redis源码剖析与实战 -〔蒋德钧〕

全链路压测实战30讲 -〔高楼〕

Spring Cloud 微服务项目实战 -〔姚秋辰(姚半仙)〕

eBPF核心技术与实战 -〔倪朋飞〕

好记忆不如烂笔头。留下您的足迹吧 :)