1. 首页
  2. JavaScript 菜鸟教程
  3. JavaScript - try...catch 语句

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 对象，也可以根据错误类型打印自定义错误消息来显示错误。

参数

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

在下面的代码中，我们将 'num1' 变量的值分配给 try{} 语句中的 '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 try…catch…finally 语句

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

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

例

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

输出

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 对象，而不是抛出基元值。

示例：引发 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

示例：引发 primitive 值

在下面的代码中，我们抛出 try{} 语句中的基元数值。在 catch{} 语句中，我们获取 thrown 原始值并打印它。

<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

示例：输入验证示例

在下面的代码中，我们定义了 number 类型的 <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 块中重新引发错误。

如果 rethrown 错误可用，则外部 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-blocks

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

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

例

在下面的代码中，我们在 try{} 语句中调用了 welcome 函数，并且 welcome（） 函数没有定义。

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

<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() 方法

将 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，以便 control 将执行 catch（） 方法的代码。

try...catch 与 set<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>Timeout() 方法

输出

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 类型错误

如果不将 valid 类型的值与方法或运算符一起使用，则 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
<< JavaScript - 错误和异常处理 JavaScript - 调试 >>