Javascript 简明教程

JavaScript - try…catch

JavaScript try…catch Statement

JavaScript 中的 try-catch statement 用于处理运行时错误（异常）。这在大多数编程语言中非常常见，用于处理异常。try-catch 语句只能处理运行时错误。try 块后面必须紧跟一个 catch 块或一个 finally 块（或两者之一）。

在 try{} statement 内部，你可以编写带有错误或可能出现错误的代码。你可以在 try{} 语句中添加常规 JavaScript 代码。

catch{} statement 用于处理错误。当 try{} 语句的代码中出现任何错误时，JavaScript 运行引擎将执行 catch{} 语句的代码来处理错误。

如果 try{} 语句的代码中没有错误，它将跳过 catch{} 语句的代码并执行代码的下一行。

Syntax

你可以按照下面的语法在代码中使用 try-catch 语句来处理异常。

try {
   // JavaScript code
} catch(error) {
   // Handle error
}

你可以在 catch{} 语句中打印错误对象或基于错误类型自定义错误消息以显示错误。

Parameters

error − catch{} 语句将“error”对象作为参数。它包含 name 和 message 属性。但是，它是一个可选参数。

Example

在下面的代码中，我们在 try{} 语句内部将“num1”变量的值赋给“num”变量。这里，“num1”变量没有定义。因此，它将抛出一个错误。

在 catch{} 语句中，我们打印错误对象的“name”和“message”属性的值。

在输出中，你可以看到它抛出一个引用错误并带有适当的错误消息。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         let num = num1;
      } catch (err) {
         output.innerHTML += "The error name is: " + err.name + "<br>";
         output.innerHTML += "The error message is: " + err.message + ".<br>";
      }
   </script>
</body>
</html>

Output

The error name is: ReferenceError
The error message is: num1 is not defined.

当 try{} 语句中出现任何错误时，它将跳过剩余代码的执行并执行 catch{} 语句的代码。

让我们通过以下示例了解它。

Example

在下面的代码中，我们调用 welcome() 函数，它没有被定义。因此，它将抛出一个引用错误。

在 catch{} 语句中，我们处理错误。

在输出中，你可以看到它打印 try{} 语句的开始消息、catch{} 语句的开始消息以及错误消息。它跳过 try{} 语句的结束消息，因为在该消息之前出现了一个错误。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         output.innerHTML += "In the start of try block <br>";
         welcome();
         output.innerHTML += "In the end of try block <br>";
      } catch (err) {
         output.innerHTML += "In the catch block <br>";
         output.innerHTML += "The error name is: " + err.name + "<br>";
         output.innerHTML += "The error message is: " + err.message + ".<br>";
      }
   </script>
</body>
</html>

Output

In the start of try block
In the catch block
The error name is: ReferenceError
The error message is: welcomeis not defined.

Note − try-catch 语句不允许你处理语法错误。它只能处理运行时错误。

例如，如果您运行以下代码。它将在浏览器的控制台中显示一个错误，但无法使用 {} 语句捕获该错误。

try {
   let num = ;
} catch (err) {
   // Error handling
}

JavaScript try…catch…finally Statement

finally{} 语句允许你在执行 try{} 和 catch{} 语句后执行特定代码。

无论错误是否发生在 try{} 语句的代码中，JavaScript 总是执行 finally{} 语句的代码。如果发生错误，它将执行 catch{} 语句的代码，然后执行 finally{} 语句的代码。

Example

在下面的代码中，我们将变量 'b' 的值分配给 try{} 语句中的变量 'a'。它会引发错误。

在 catch{} 语句中，我们打印错误。

在 finally{} 语句中，它打印消息。

你可以观察到输出首先运行 try{} 语句的代码，接下来运行 catch{} 语句的代码，最后运行 finally{} 语句的代码。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         let a = b;
      } catch (e) {
         document.getElementById("output").innerHTML = e;
      }
      finally {
         document.getElementById("output").innerHTML += "<br>Finally block always executes";
      }
   </script>
</body>
</html>

Output

ReferenceError: b is not defined
Finally block always executes

Example

在下面的示例中，我们将没有错误的代码写入 try{} 语句。

我们还添加了 catch{} 和 finally{} 语句。

输出显示它执行 try{} 语句代码，然后执行 finally{} 语句代码。它跳过执行 catch{} 语句，因为代码没有错误。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         let a = 10;
         output.innerHTML = "Value of a is " + a + "<br>";
      } catch (e) {
         output.innerHTML = e.name + " : " + e.message;
      }
      finally {
         output.innerHTML += "Inside the finally block.";
      }
   </script>
</body>
</html>

Output

Value of a is 10
Inside the finally block.

JavaScript Throw Statement

当代码中发生任何错误时，JavaScript 会默认抛出一个错误。但你也可以手动抛出错误。例如，你正在进行表单数据验证。如果数据无效，你可以抛出错误并要求用户更正数据。

当你使用“throw”语句抛出错误时，try{} 语句中随后出现的代码将不会执行，并且它将执行 catch{} 语句的代码。

你可以按照下面的语法使用“throw”语句抛出错误。

throw <error>;

在上面的语法中，<error> 可以是“错误”对象、字符串、数字、基本值或特定类型的错误对象。一个好的做法是抛出一个错误对象，而不是抛出一个基本值。

Example: Throwing the Error object

在下面的代码中，我们使用“throw”语句从 try{} 语句中抛出一个错误对象。它停止执行“throw”语句的剩余代码，并执行 catch{} 语句的代码。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         output.innerHTML += "Start of the try block. <br />";
         throw new Error("Custom error");
         output.innerHTML += "End of the try block. <br />"; //not executed
      } catch (e) {
         output.innerHTML += "Catch block: Caught exception. <br />";
         output.innerHTML += e.name + " : " + e.message;
      }
   </script>
</body>
</html>

Output

Start of the try block
Catch block: Caught exception.
Error: Custom error

Example: Throwing the primitive value

在下面的代码中，我们从 try{} 语句中抛出原始数字值。在 catch{} 语句中，我们获取抛出的原始值并将其打印出来。

<html>
<body>
   <div id = "output">The error message is:  </div>
   <script>
      try {
         throw 20;
      } catch (e) {
         document.getElementById("output").innerHTML += e;
      }
   </script>
</body>
</html>

Output

The error message is: 20

Example: Input Validation Example

在下面的代码中，我们定义了数字类型的 <input> 元素，以获取用户的年龄作为输入。

当用户单击提交年龄按钮时，它会调用 handleAge() 函数。handleAge() 函数检查年龄是否小于 18 岁。如果是，它会抛出 RangeError。

catch{} 语句打印错误消息以验证年龄。

<html>
<body>
   <p>Age: <input type = "number" id = "age" value = "20"></p>
   <button onclick = "handleAge()"> Submit Age </button>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function handleAge() {
         let age = document.getElementById("age").value;
         try {
            if (age < 18) {
               throw RangeError("You are not eligible to vote");
            } else {
               output.innerHTML += "<br>You are eligible to vote";
            }
         } catch (e) {
            output.innerHTML += "<br>The error is - " + e;
         }
      }
   </script>
</body>
</html>

Output

Age: 20
Submit Age
The error is - RangeError: You are not eligible to vote

Nesting Try Blocks

有时，需要开发人员编写嵌套的 try-catch 语句。嵌套的 try-catch 表示 try 块位于 try 块内。

如果内部 catch{} 语句无法处理错误，则外部 catch{} 语句可以处理该错误。你也可以跳过内部 catch{} 语句，但这种情况下，需使用 finally{} 语句编写 try{} 语句。

Example

在下面的代码中，使用两个嵌套的 try{} 语句。我们已将 try-finally 语句添加到外部 try{} 语句中。

内部 try{} 语句抛出错误，由外部 catch{} 语句处理。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         try {
            throw Error("Error in the inner try block");
         } finally {
            output.innerHTML += "Inside the inner finally block. <br>";
         }
      } catch (e) {
         output.innerHTML += "Inside the outer catch block. <br>";
         output.innerHTML += "Error: " + e.message;
      }
   </script>
</body>
</html>

Output

Inside the inner finally block.
Inside the outer catch block.
Error: Error in the inner try block

The Rethrow Error

有时，catch{} 语句可能无法处理错误。在这种情况下，可以使用“throw”语句从 catch 块中重新抛出错误。

如果可用，外部 catch{} 语句可以处理重新抛出的错误。

Example

在下面的代码中，我们创建了两个嵌套的 try-catch 块。在内部 try 块中，我们使用“throw”语句抛出错误。内部 catch{} 语句将捕获错误，然后我们从内部 catch{} 语句重新抛出错误。

然后，我们在外部 catch{} 语句中处理错误。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById("demo");
      try {
         try {
            throw 20;
         } catch (e) {
            // Rethrowing the error.
            output.innerHTML = "Inside the inner catch block. <br>";
            output.innerHTML += "Error: " + e + "<br> <br>";
            throw e;
         }
      } catch (e) {
         output.innerHTML += "Inside the outer catch block. <br>";
         output.innerHTML += "Error: " + e;
      }
   </script>
</body>
</html>

Output

inside the inner catch block.
Error: 20

Inside the outer catch block.
Error: 20

Conditional Catch-blocks

在 catch{} 块内，可以使用 if-else 语句有条件地处理错误。这样，可以对多个 try{} 语句使用单个 catch{} 语句。

在 catch{} 语句中，可以使用“instanceOf”运算符检查错误的类型，并根据错误类型处理错误。

Example

在下面的代码中，我们在 try{} 语句内调用 welcome 函数，并且未定义 welcome() 函数。

在 catch{} 语句中，我们使用“instanceOf”运算符检查错误的类型，并根据错误的类型在网页上打印消息。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         welcome(); // Function not defined
      } catch (e) {
         if (e instanceof ReferenceError) {
            output.innerHTML = "Reference error is occurred.";
         } else if (e instanceof TypeError) {
            output.innerHTML = "Type error is occurred.";
         } else if (e instanceof RangeError) {
            output.innerHTML = "Range error is occurred.";
         } else if (e instanceof SyntaxError) {
            output.innerHTML = "Syntax error is occurred.";
         } else {
            output.innerHTML = "Error is occurred.";
         }
      }
   </script>
</body>
</html>

Output

Reference error is occurred.

JavaScript try…catch with setTimeout() Method

对异步 JavaScript 代码使用 try-catch 语句不会捕获从 try 块抛出的错误。

原因是，当所有主线程代码执行完成后，JavaScript 才会执行异步代码。

让我们通过以下示例了解它。

Example

在下面的代码中，我们在 try{} 语句内使用了 setTimeOut() 方法。它在 1000 毫秒后执行回调函数。在回调函数中，我们使用“throw”语句抛出错误。

在输出中，你可以看到 catch{} 语句没有捕获错误，并在浏览器的控制台中打印错误。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         output.innerHTML = "Inside the try block. <br>";
         setTimeout(() => {
            throw new Error("Whoops!");
         }, 1000);
      } catch (err) {
         output.innerHTML += "Inside the catch block. <br>";
         output.innerHTML = err;
      }
   </script>
</body>
</html>

Output

Inside the try block.

Promise-based Errors

如果在使用 Promise 代码时发生任何错误，可以使用 catch() 方法处理错误。或者，可以将错误处理程序作为 then() 方法的第二个参数传递。

Examples

在下面的代码中，我们创建了 Promise 并在一千毫秒后将其拒绝。

然后，我们使用 then() 和 catch() 方法处理 Promise。此处，我们拒绝 Promise，以便控件执行 catch() 方法的代码。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      output.innerHTML = "The promise is pending...";
      let promise = new Promise((resolve, reject) => {
         setTimeout(() => {
            reject("The promise is rejected!");
         }, 1000);
      });
      promise
      .then((result) => {
         output.innerHTML = result;
      })
      .catch((error) => {
         output.innerHTML = error;
      });
   </script>
</body>
</html>

Output

The promise is rejected !

Types of Errors in JavaScript

JavaScript 中有不同类型的错误。在这里，我们将学习每种类型的错误和示例。

JavaScript Range Error

当值超出指定范围时，JavaScript 代码会抛出范围错误。

在下面的代码中，我们使用了 toPrecision() 方法并传递 1000 作为参数。它抛出范围错误，因为数字不能有 1000 个位数。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         let num = 10;
         num.toPrecision(1000);
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

RangeError: toPrecision() argument must be between 1 and 100

JavaScript Reference Error

当尝试访问未定义的变量、函数、类方法等时，会发生引用错误。

在下面的代码中，我们执行了“window”对象的 test() 方法。这里未定义 test() 方法，因此会抛出引用错误。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         window.test();
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

TypeError: window.test is not a function

JavaScript Type Error

如果你在方法或操作符中未使用有效类型的变量，JavaScript 代码会抛出类型错误。

在下面的示例中，我们对布尔变量使用了 toLowerCase() 方法，但 toLowerCase() 方法仅受字符串值支持。因此，它抛出类型错误。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         let bool = true;
         bool.toLowerCase();
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

TypeError: bool.toLowerCase is not a function

JavaScript URI (Uniform Resource Identifier) Error

当未将有效 URL 作为 encodeURI、decodeURI 等方法的参数传递时，会发生 URI 错误。

在下面的示例中，我们将无效的编码 URI 作为 decodeURI() 方法的参数传递。因此，它抛出 URIError。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         decodeURI("%");
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

Output

URIError: URI malformed

Javascript 简明教程

JavaScript - try…​catch

JavaScript try…​catch Statement

Syntax

Parameters

Example

Output

Example

Output

JavaScript try…catch…finally Statement

Example

Output

Example

Output

JavaScript Throw Statement

Example: Throwing the Error object

Output

Example: Throwing the primitive value

Output

Example: Input Validation Example

Output

Nesting Try Blocks

Example

Output

The Rethrow Error

Example

Output

Conditional Catch-blocks

Example

Output

JavaScript try…​catch with setTimeout() Method

Example

Output

Promise-based Errors

Examples

Output

Types of Errors in JavaScript

JavaScript Range Error

JavaScript Reference Error

JavaScript Type Error

JavaScript URI (Uniform Resource Identifier) Error

Output

JavaScript - try…catch

JavaScript try…catch Statement

JavaScript try…catch with setTimeout() Method