What is the use of js try...catch syntax structure? try...catch detailed explanation

What this article brings to you is what is the use of js try...catch syntax structure? Detailed explanation of try...catch. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The basic syntax of try...catch

try..catch construction mainly has two blocks: try{ } and catch(err){}:

try{
   //在这里运行代码
   //抛出错误
}
catch(err){
   //在这里处理错误
}

The working principle is as follows:

1. First, execute the code try {...}.

2. If there is no error, ignore catch(err){....}. After executing try {...}, skip catch(err){....} and execute directly. Next statement.

3. If an error occurs, try stops executing and starts executing catch(err){...}. The err variable (which can be defined arbitrarily) contains an error object detailing what happened.

2. Error Object

When an error occurs, JavaScript will generate an object containing detailed information about it. This object is then passed to catch as a parameter, for example:

try {
  // ...
} catch(err) { // <-- "错误对象"，“err”可以用可以用任意词代替
  // ...
}

For all built-in errors, the error object inside the catch block has two main properties:

name

Error name, "reference error" for an undefined variable.

message

Text message with error details.

There are other non-standard properties in most environments. The most widely used and supported one is:

stack

Current call stack: a string containing information about the nested sequence of calls that caused the error (the purpose of which is for debugging).

For example:

try {
  lalala; // 错误，变量未定义！
} catch(err) {
  alert(err.name); // 引用错误
  alert(err.message); // Lalala变量没有定义
  alert(err.stack); //引用错误：Lalala变量没有定义在…
  
  // 也可以作为整体显示错误
  // “name: message”：可以将错误转换为字符串
  alert(err); // ReferenceError: lalala is not defined
}

3. Use "try...catch"

Let us explore a real Use case try..catch.

html code:

请输出一个 5 到 10 之间的数字:

测试输入

js code:

function myFunction() {
	try {
		var x = document.getElementById("demo").value;
		//取元素的值

		if(x == "") throw "值为空";
		//根据获取的值， 抛出错误
		if(isNaN(x)) throw "不是数字";
		if(x > 10) throw "太大";
		if(x < 5) throw "太小";
	} catch(err) {
		var y = document.getElementById("mess");
		//抓住上面throw抛出的错误， 给p标签显示
		y.innerHTML = "错误：" + err + "。";
	}
}

Rendering after operation:

4. try...catch...finally

The try...catch construct also has a code clause: finally.

If it exists, it will run in all cases:

1. After try, if there is no error,

2. After catch After that, if there is an error

The extended syntax looks like this:

try {
   ... 尝试执行代码 ...
} catch(e) {
   ... 处理错误 ...
} finally {
   ... 始终执行 ...
}

Try running this code:

try {
  alert( 'try' );
  if (confirm('犯错误了？')) BAD_CODE();
} catch (e) {
  alert( 'catch' );
} finally {
  alert( 'finally' );
}

The code can be executed in two ways:

If you answer "Yes (OK)" to "Made a mistake?", then execute try -> catch -> finally.

If you say "No (cancel)", then try -> finally.

finally indicates that we need to use this clause when we start doing something before try..catch and want to complete it without any result.

For example, we want to measure the time fib(n) taken by the Fibonacci number function. Of course, we can start the measurement before running it and complete it afterwards. But what if an error occurs during the function call? In particular, the implementation of fib(n) in the code below returns an error for a negative or non-integer number.

finally Regardless, this clause is a good place to get your measurements done.

Here finally guarantees that the time will be measured correctly in both cases - if fib is executed successfully and an error occurs:

let num = +prompt("输入正整数？", 35)

let diff, result;

function fib(n) {
	if(n < 0 || Math.trunc(n) != n) {
		throw new Error("不能是负的，且必须是整数。");
	}
	return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

let start = Date.now();

try {
	result = fib(num);
} catch(e) {
	result = 0;
} finally {
	diff = Date.now() - start;
}

alert(result || "发生错误");

alert(`执行时间 ${diff}ms`);

When we enter 35:

When we enter -1:

Both measurements are completed correctly.

Summary: The above is the entire content of this article. I hope it will be helpful to everyone’s learning. Related video tutorials are recommended: JavaScript Tutorial!

The above is the detailed content of What is the use of js try...catch syntax structure? try...catch detailed explanation. For more information, please follow other related articles on the PHP Chinese website!