JS 异常处理 - throw、try 和 catch

当执行 JS 代码时,会发生各种错误。
可能是语法错误,也可能是程序员造成的编码错误或错别字。
又或许是拼写错误或语言中缺少的功能。
还有可能是由于来自服务器或用户的错误输出而导致的错误。

JS - throw

当发生错误发生时,JS 通常会停止执行,并将抛出一个错误。
以下示例中,输入的不是正整数将会抛出异常:

<span>年龄:</span>
<input type="number" id="input"/>
<button onclick="submit()">提交</button>

<script>
	function submit(){
		var el = document.getElementById("input");
		if(!(/(^[1-9]\d*$)/.test(el.value))){
			throw "输入的不是正整数";
		}
	}
</script>

JS - try 和 catch

try 语句里面定义要进行错误测试的代码块。
catch 语句里面则定义当 try 里面的代码块发生错误时,要执行的代码块。
JS 中 try 和 catch 是成对出现的。

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

以下示例中,原本应该是 console.log("你好!"),但是错别字导致程序错误,执行 catch 语句里面的弹出框 :

try {
	console.loh("你好!");
} catch(err) { 
	alert("程序错误"); 
}

finally 语句不管 try 和 catch 中是否产生异常都会执行该代码块 :

try {
	console.log("你好!");
} catch(err) { 
	alert("程序错误"); 
} finally {
	console.log("abc")
}

JS - throw 与 try 和 catch

throw 语句可以创建自定义错误。
可以把 throw 与 try 和 catch 一起使用,这样就可以够控制程序流,并生成自定义的错误消息。

<span>年龄:</span>
<input type="number" id="input"/>
<button onclick="submit()">提交</button>

<script>
	function submit(){
		var el = document.getElementById("input");
		var val = el.value;
		try {
			if(!(/(^[1-9]\d*$)/.test(val))) throw "输入的不是正整数";
			if(val>150) throw "年龄太大了";
		} catch(err) {
			console.log("错误:"+err);
		}
	}
</script>

若输入负数或有小数,则会抛出 "输入的不是正整数"。
若输入的数大于150,则抛出 "年龄太大了"