7、try和catch错误解决和throw错误抛出

最新推荐文章于 2025-03-14 20:26:30 发布

瓜娃子qaq

最新推荐文章于 2025-03-14 20:26:30 发布

阅读量409

点赞数

分类专栏： JS 文章标签： try throw

本文链接：https://blog.youkuaiyun.com/weixin_45699925/article/details/103006119

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中使用try、catch、finally进行错误处理的方法，并演示了如何通过throw语句自定义错误，以及在实际场景中如何应用错误处理来提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、try和catch错误

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>

</head>
<body>
	<script>
		function abc() {
			console.log(123);
		}
		//try 代码块中,可能存在错误
		try{
			cba();
		}catch(e){
			//当try代码块中存在错误,则运行catch中的内容
			//TODO handle the exception
			console.log([e]);
			console.log(e.message);
			console.log(e.stack);
		}finally {
			//可写可不写
			//不管是否有错,都会运行这里面的代码
			console.log('不管是否有错, 都会运行这里面的代码');
		}
		console.log('cba函数后的内容');
	</script>
</body>
</html>

2、throw自定义错误

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>

</head>
<body>
	<script>
		console.log('正常运行的代码');
		try {
			
			//throw主动抛出错误
			throw'这是中间抛出的错误';
			
		} catch (e) {
			console.log('这里执行处理错误');
		}
		console.log('这是错误后面的代码');
	
	</script>
</body>
</html>

3、错误简单应用

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<input type="text" id="phone">
	<button>拨打电话</button>
	<script>
		var inputDom = document.querySelector('#phone');
		var btn = document.querySelector('button');
		btn.onclick = function () {
			var phoneNumStr = inputDom.value;
			var phoneNum = parseInt(phoneNumStr);
			console.error('这里是信息错误提示,不会中断代码');
			try {
				if (isNaN(phoneNum)) {
					var error = new Error('这个电话号码格式有问题,这是电话号码的错误');
					error.type = 'geShi_problem';
					throw error;
				} else if (phoneNumStr.length != 11) {
					var error = new Error('电话号码长度有问题,因该是11位');
					error.type = 'numLength_problem';
					throw error;
				}
			} catch (e) {
				console.log(e);
				if (e.type == 'numLength_problem') {
					var h1 = document.createElement('h1');
					h1.innerHTML = '请正确输入11位的号码';
					document.body.appendChild(h1);
				} else {
					var h1 = document.createElement('h1');
					h1.innerHTML = '请确保输入的号码是数字';
					document.body.appendChild(h1);
				}
			}
			
			console.log('执行拨打电话');
		};
	
	
	</script>
</body>
</html>