JavaScript - try...catch 语句

JavaScript try...catch 语句

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

在 try{} 语句 中，您可以编写包含错误或可能出现错误的代码。您可以将常规 JavaScript 代码添加到 try{} 语句中。

catch{} 语句 用于处理错误。当 try{} 语句的代码发生任何错误时，JavaScript 运行引擎会执行 catch{} 语句的代码来处理错误。

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

语法

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

try {
    // JavaScript 代码
} catch(error) {
    // 处理错误
}

您可以在 catch{} 语句中打印错误对象，也可以根据错误类型打印自定义错误消息来显示错误。

参数

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

示例

在下面的代码中，我们在 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>

输出

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

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

让我们通过下面的示例来理解。

示例

在下面的代码中，我们调用了未定义的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>

输出

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

注意 - try-catch 语句不允许您处理语法错误。它只能处理运行时错误。

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

try {
   let num = ;
} catch (err) {
   // 错误处理
}

JavaScript trycatchfinally 语句

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

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

示例

在下面的代码中，我们在 try{} 语句中将变量"b"的值赋值给变量"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>

输出

ReferenceError: b is not defined
Finally block always executes

示例

在下面的示例中，我们将没有任何错误的代码写入 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>

输出

Value of a is 10
Inside the finally block.

JavaScript Throw 语句

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

当您使用 throw 语句抛出错误时，try{} 语句中该语句之后的代码将不会执行，而是会执行 catch{} 语句中的代码。

您可以按照以下语法使用 throw 语句抛出错误。

throw <error>;

在上述语法中，<error> 可以是 Error 对象、字符串、数字、原始值或特定类型的错误对象。抛出 Error 对象而不是原始值是一种很好的做法。

示例:抛出 Error 对象

在下面的代码中，我们使用 throw 语句从 try{} 语句中抛出一个 Error 对象。它会停止执行 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>

输出

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

示例:抛出原始值

在下面的代码中，我们从 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>

输出

The error message is: 20

示例:输入验证示例

在下面的代码中，我们定义了数字类型的 <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>

输出

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

嵌套 Try 代码块

有时，开发人员需要编写嵌套的 try-catch 语句。嵌套的 try-catch 意味着在 try 代码块内部嵌套一个 try 代码块。

如果内层 catch{} 语句无法处理错误，外层 catch{} 语句可以处理。您也可以跳过内层 catch{} 语句，但在这种情况下，您需要将 finally{} 语句与 try{} 语句一起编写。

示例

我们在下面的代码中使用了两个嵌套的 try{} 语句。我们在外层 try{} 语句中添加了 try-finally 语句。

内层 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>

输出

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

重新抛出错误

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

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

示例

在下面的代码中，我们创建了两个嵌套的 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) {
            // 重新抛出错误。
            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>

输出

inside the inner catch block.
Error: 20

Inside the outer catch block.
Error: 20

条件 Catch 块

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

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

示例

在下面的代码中，我们在 try{} 语句中调用了 Welcome 函数，而 Welcome() 函数尚未定义。

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

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         welcome(); // 函数未定义
      } 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>

输出

Reference error is occurred.

JavaScript try...catch 和 setTimeout() 方法

在异步 JavaScript 代码中使用 try-catch 语句无法捕获 try 块中抛出的错误。

原因是 JavaScript 会在所有主线程代码执行完毕后执行异步代码。

让我们通过以下示例来理解。

示例

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

在输出中，您可以观察到 cathc{} 语句没有捕获错误，而是将错误打印在浏览器控制台中。

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

输出

Inside the try block.

基于 Promise 的错误

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

示例

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

之后，我们使用 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>

输出

The promise is rejected !

JavaScript 中的错误类型

JavaScript 可能抛出不同类型的错误。在这里，我们将通过示例逐一学习每种类型。

JavaScript 范围错误

当值超出指定范围时，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 引用错误

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

示例

在下面的代码中，我们执行 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 类型错误

如果在方法或运算符中使用无效类型的值，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(统一资源标识符)错误

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

示例

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

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

输出

URIError: URI malformed