ES6 错误处理

编程中有三种类型的错误:语法错误、运行时错误和逻辑错误。

语法错误

语法错误(也称为解析错误)在传统编程语言的编译时发生,并在JavaScript中进行解释。当JavaScript中出现语法错误时,只有包含在与语法错误相同的线程中的代码才会受到影响,而其他线程中的其余代码会被执行,因为它们中的任何内容都取决于包含错误的代码。

运行时错误

运行时错误(也称为异常)在执行期间发生(编译/解释之后)。异常也会影响其发生的线程,从而允许其他JavaScript线程继续正常执行。

逻辑错误

逻辑错误可能是最难追查的错误类型。这些错误不是语法或运行时错误的结果。相反,当您在驱动脚本的逻辑中犯了错误,并且没有按预期得到结果时,就会发生这种情况。

你不能捕获这些错误,因为这取决于你的业务需求,你想要在你的程序中加入什么类型的逻辑。

运行时错误发生时,JavaScript会引发Error对象的实例。下表列出了Error对象的预定义类型。

Sr.No 错误对象 & 描述
1

EvalError

创建一个表示关于全局函数eval()发生的错误的实例。

2

RangeError

创建一个实例,表示当数值变量或参数超出其有效范围时发生的错误。

3

ReferenceError

创建一个实例,表示解引用无效引用时发生的错误。

4

SyntaxError

创建代表解析代码时发生的语法错误的实例。

5

TypeError

创建表示当变量或参数不是有效类型时发生的错误的实例。

6

URIError

创建一个实例,表示在encodeURI()或decodeURI()传递无效参数时发生的错误。

抛出异常

使用throw语句可以引发错误(预定义或用户定义)。稍后可以捕获这些例外情况,并且您可以采取适当的措施。以下是相同的语法。

语法:抛出一个通用的异常

throw new Error([message])
OR
throw([message])

语法:抛出一个特定的异常

throw new Error_name([message])

异常处理

异常处理通过try ... catch语句完成。当程序遇到异常时,程序将以不友好的方式终止。为了防止这种意外错误,我们可以将代码封装在try ... catch语句中。

try块后面必须紧跟一个catch块或一个finally块(或两者之一)。当try块中发生异常时,将异常放入e中并执行catch块。可选的finally块在try / catch后无条件执行

以下是相同的语法。

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  
}]

实例

var a = 100;
var b = 0;
try {
   if (b == 0 ) {
      throw(“Divide by zero error.”);
   } else {
      var c = a / b;
   }
}
catch( e ) {
   console.log("Error: " + e );
}

输出

在成功执行上述代码时,会显示以下输出。

Error: Divide by zero error

注意:您可以在一个函数中引发异常,然后使用try ... catch块在相同函数或调用者函数中捕获该异常。

onerror()方法

onerror事件处理程序是第一个有助于在JavaScript中进行错误处理的功能。每当页面发生异常时,就会在窗口对象上触发错误事件。

实例

<html>
   <head>
      <script type = "text/javascript">
         window.onerror  =  function () {  
            document.write ("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>

在成功执行上述代码时,会显示以下输出。

An error occurred.

onerror事件处理程序提供了三条信息来确定错误的确切性质 -

  • 错误消息 - 浏览器针对给定错误显示的消息。
  • URL - 发生错误的文件。
  • 行号 - 导致错误的给定URL中的行号。

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

实例

<html>
   <head>
      <script type = "text/javascript">
         window.onerror  =  function (msg, url, line) {  
            document.write ("Message : " + msg );  
            document.write ("url : " + url );  
            document.write ("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>

自定义错误

JavaScript支持自定义错误的概念。以下示例解释了相同的情况。

示例1:使用默认消息的自定义错误

function MyError(message) {
   this.name = 'CustomError';
   this.message = message || 'Error raised with default message';
}
try {
   throw new MyError();
} catch (e) {  
   console.log(e.name);      
   console.log(e.message);  // 'Default Message'
}

在成功执行上述代码时,会显示以下输出。

CustomError
Error raised with default message

示例2:自定义错误,带有用户定义的错误消息

function MyError(message) {
   this.name = 'CustomError';
   this.message = message || 'Default Error Message';  
} try {
   throw new MyError('Printing Custom Error message');
}
catch (e) {
   console.log(e.name);      
   console.log(e.message);  
}

在成功执行上述代码时,会显示以下输出。

CustomError
Printing Custom Error message

下一章:ES6 验证

表单验证通常用于在客户端输入所有必要数据并按下提交按钮后在服务器上进行。如果客户输入的数据不正确或者完全丢失,服务器将不得不将所有数据发送回客户端,并要求使用正确的信息重新提交表单。这真是一个漫长的过程,曾经给服务器带来很大负 ...