一、JavaScript遇到錯誤
當 JavaScript 引擎執行 JavaScript 代碼時,會發生各種錯誤。
- 可能是語法錯誤,通常是程序員造成的編碼錯誤或錯別字。
- 可能是拼寫錯誤或語言中缺少的功能(可能由于瀏覽器差異)。
- 可能是由于來自服務器或用戶的錯誤輸出而導致的錯誤。
- 可能是由于許多其他不可預知的因素。
二、JavaScript拋出錯誤
當錯誤發生時,當事情出問題時,JavaScript 引擎通常會停止執行,并拋出一個錯誤消息。
使用 throw語句也可以創建自定義消息(拋出異常),下文會介紹到throw語句的用法。
三、try...catch...finally結構
try/catch/finally 語句用于處理代碼中可能出現的錯誤信息。
【1】定義和用法
try語句:定義在執行時進行錯誤測試的代碼塊。
catch語句:定義當 try 代碼塊發生錯誤時,所執行的代碼塊。
finally語句:在 try 和 catch 之后,無論try和catch結果有無異常都會執行。
注意: catch 和 finally 語句都是可選的,但你在使用 try 語句時必須至少使用其中一個。
1、 事情還有得挽回, 換條路走
try {
// 執行某個邏輯,沒出錯,則按流程正常執行
} catch (err) {
//出問題了, 換個邏輯執行
} finally {
// 可選,無論try/catch結果如何都會執行的代碼塊
}
2、 體面的退出
try {
// 執行某個邏輯,沒出錯,則按流程正常執行
} catch (err) {
// 出問題了,彈個框告訴用戶出錯了,終止執行
// err參數就是拋出的錯誤信息
} finally {
// 可選,無論try/catch結果如何都會執行的代碼塊
}
【2】案例
try {
let params = {
page: 1,
size: 10
}
let queryResult = await getOfferSheet(params);
this.$alert('操作成功');
} catch (err) {
this.$alert(err);
}
// 如上案例是通過調用一個api接口,處理成功返回200,則彈出操作成功,如果報錯,則跳到catch代碼塊彈出錯誤信息框提示用戶出問題了
四、throw 語句
throw 語句允許我們創建自定義錯誤。throw 語句的作用是手動中斷程序執行,創建并拋出一個異常,異常可以是 JavaScript 字符串、數字、邏輯值或對象。
【1】語法
// 拋出一個字符串
throw 'Error!'; // Uncaught Error!
// 拋出一個數值
throw 404; // Uncaught 404
// 拋出一個布爾值
throw true; // Uncaught true
// 拋出一個對象
throw {
toString: function () {
return 'Error!';
}
}; // Uncaught {toString: ?}
【2】案例
if (x < 0) {
throw new Error('x必須為正數'); // 或者換成 throw 'x必須為正數'
}
// 上面代碼中,如果變量x小于0,就手動拋出一個錯誤,告訴用戶x的值不正確,整個程序就會在這里中斷執行。可以看到,throw拋出的錯誤就是它的參數'x必須為正數'
五、注意
如果把 throw 與 try 和 catch 一起使用,那么您能夠控制程序流,并生成自定義的錯誤消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<p>請輸出一個 1 到 10 之間的數字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">測試輸入</button>
<p id="message"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if (x == "") throw "值為空";
if (isNaN(x)) throw "不是數字";
x = Number(x);
if (x < 1) throw "太小";
if (x > 10) throw "太大";
} catch (err) {
message.innerHTML = "錯誤: " + err;
}
}
</script>
</body>
</html>