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 code
} catch(error) {
   // Handle error
}

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

参数

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

示例

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

在 catch{} 语句中，我们打印 error 对象的‘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) {
   // Error handling
}

JavaScript try…catch…finally 语句

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

无论 try{} 语句中的代码是否发生错误，JavaScript 都会始终执行 finally{} 语句中的代码。如果发生错误，它将执行 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{} 语句，但在这种情况下，您需要使用 try{} 语句编写 finally{} 语句。

示例

我们在下面的代码中使用了两个嵌套的 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) {
            // 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>

输出

inside the inner catch block.
Error: 20

Inside the outer catch block.
Error: 20

条件 Catch 块

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

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

示例

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

输出

Reference error is occurred.

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

使用 try-catch 语句处理异步 JavaScript 代码不会捕获从 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 RangeError

当值超出指定范围时，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 ReferenceError

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

示例

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

如果您不使用有效类型的数值与方法或运算符，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 作为 decodeURI() 方法的参数传递。因此，它会抛出 URIError。

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

输出

URIError: URI malformed
打印页面
上一页
下一页
广告