iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
自我挑戰組

Be friend with JavaScript系列 第 25

Day 25 - Exception Handling

首先來認識常見的錯誤類型:

  • EvalError - eval() 執行錯誤
  • RangeError - 一個數值超過允許範圍
  • ReferenceError - 未宣告的變數
  • SyntaxError - 程式語法錯誤
  • TypeError - 型別錯誤

當錯誤發生時,JavaScript 會停止執行,並產生錯誤訊息,通常會使用 try catch 搭配 throw 來建立自定義的錯誤訊息,而在 try catch 裡只能處理同步的錯誤,非同步處理錯誤將會在下一篇做介紹。

try...catch...finally

try 一定要搭配 catch 或 finally 來做使用,例如:try...catch or try...finally or try...catch...finally

語法:

try {

   // 要執行的程式碼(預期可能會發生錯誤的程式碼)
   // 如果發生錯誤,就停止 try 的程式碼,並將 error 拋給 catch 來處理

} catch (error) {

   // 捕捉錯誤,若沒有錯誤,此區塊也可以省略
   // 當 try 拋出 error 時,就執行 catch 區塊裡的程式碼
   // catch 區塊的參數為一個 Error object
   // Error object 有兩個屬性:name 和 message,name 為錯誤類型,message 為錯誤訊息

} finally {

    // 可以省略 finally 區塊
    // 無論最後結果如何,最後 finally 區塊的程式碼都會被執行
    // (即使 try 或 catch 區塊有 return,也阻止不了 finally 區塊的執行)

}

例如:

try {
  console.log(abc);
} catch (err) {
  console.log(err.name);
  console.log(err.message);
} finally {
  console.log("程式碼執行結束");;
}
// ReferenceError
// abc is not defined
// 程式碼執行結束

上面的例子因為沒有宣告 abc 這個變數,找不到 abc,所以在 try 區塊裡,就會拋出錯誤訊息給 catch 區塊,這時候查看 catch 的錯誤訊息就可以看到錯誤類型為 ReferenceError,錯誤訊息為 abc is not defined,而最後會執行 finally 區塊裡的程式碼:程式碼執行結束。

throw

  • throw new Error()
    可以利用 constructor 建立自定義的 Error object,這個方法可以讓瀏覽器像處理自己生成的錯誤一樣來處理這行程式碼拋出的錯誤,而所有的例外錯誤都繼承這個 Error object。

例如:

throw new Error("This is Error message.")

這時候我們查看 Devtool 可以發現這個錯誤訊息變成我們自己定義的內容了
https://ithelp.ithome.com.tw/upload/images/20210926/20140282EdpHHPZhcI.jpg

也可以改變錯誤類型的預設訊息,例如:

try {
  throw new ReferenceError("請不要忘記宣告變數");
  console.log(abc);
} catch (err) {
  console.log(err);
} finally {
  console.log("程式碼執行結束");;
}

https://ithelp.ithome.com.tw/upload/images/20210926/20140282u5t8Nv0ywu.jpg

  • throw expression
    拋出錯誤時,必須在 throw 後面放一個值來指定錯誤訊息,而這個值的類型不限,可以是 String, Number, Boolean, object...等。

例如:

try {
  throw 'error message';
} catch (err) {
  console.log(err); // error message
  console.log(err.name); // undefined
  console.log(err.message); // undefined
}

上面的例子要注意的是,因為建立的錯誤訊息是字串,所以這時候的錯誤訊息不是一個 Error object,沒有 name 和 message 屬性,查看 name 和 message 的時候就會顯示 undefined。

參考資料:
錯誤與例外處理 - 從ES6開始的JavaScript學習生活
流程控制與例外處理 - MDN


上一篇
Day 24 - fetch
下一篇
Day 26 - async / await
系列文
Be friend with JavaScript39

1 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-26 19:56:18

這時候的錯誤訊息不是一個 object,沒有 name 和 message 屬性

你好,請問文章中提到object有name跟 message屬性,是否願意提供資料出處呢~

感謝~

目前只知道 Error 物件本身有message,name等Properties
https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/error

看更多先前的回應...收起先前的回應...
Han iT邦新手 5 級 ‧ 2021-09-27 00:39:24 檢舉

Hi~我想你可能誤會我的意思,或者是我看不太懂你的問題

這時候的錯誤訊息不是一個 object,沒有 name 和 message 屬性

我的意思是:
因為上面的例子我寫了 throw 'error message',是丟出一個字串,而不是利用 constructor 建立 Error Object,所以裡面不會有 Error Object 的 name 和 message 屬性
希望有回答到你的問題~

感謝回覆

不好意思是我眼殘了XD
就想說沒聽過object有name這個Properties
原來是字串啊~~

啊,也恭喜要完賽了

Han iT邦新手 5 級 ‧ 2021-09-27 00:58:22 檢舉

哈哈哈沒事啦~我的表達不好,有稍微修改一下文章了哈哈
終於要完賽了><
你也加油呀!
祝你最後能追到小姐姐/images/emoticon/emoticon37.gif

XD
謝摟

我要留言

立即登入留言