認識throw使用時機 使用try-catch處理錯誤 處理Promise錯誤 結合await、await與try-catch

2. 7. 錯誤處理
• 學習目標
– 認識throw使用時機
– 使用try-catch處理
錯誤
– 處理Promise錯誤
– 結合await、await與
try-catch
2

3. 3

4. 4

5. 5

6. 6

7. • 在設計函式或方法時，遇到無法繼續流程
的錯誤時，想令呼叫者有機會處理錯誤，
才是拋出錯誤的目的
7

8. • 如果在函式中，程式碼流程先return了，
finally區塊會先執行完後，再將值傳回
8

9. 掌握錯誤型態
• SyntaxError
• ReferenceError
• TypeError
• RangeError
• URIError
9

10. SyntaxError
• 剖析程式碼語法時期
• eval()、JSON.parse()剖析失敗
10

11. • 試圖使用未宣告的名稱
11
ReferenceError

12. TypeError
• 試圖操作物件上不存在的行為
12

13. RangeError、URIError
• 在呼叫某些API時，指定的引數有誤時會拋
出的錯誤
– Number.toExponential()、
Number.toFixed()或
Number.toPrecision()若引數有誤會拋出
RangeError
– encodeURI()或decodeURI()有誤會拋出
URIError。
13

14. • try-catch並不支援多個catch區塊
14

15. • ES10以後catch可以不寫括號部份
15

16. 自訂錯誤型態
• JavaScript最初是為瀏覽器而生，可用資源
相對有限，錯誤的類型也就相對地少
• ECMAScript多數規範是集中在語言本身，
標準錯誤型態多半也是跟語言本身相關
• 不同環境或其他技術標準的錯誤類型，是
由各個環境自行實作，或是其他技術標準
來規範
16

17. • 對於應用程式或程式庫開發，建議針對需
求，發展自己的一套錯誤型態，令錯誤處
理能突顯應用程式或程式庫的意圖
17

18. 18

19. 19

20. 20

21. • 程式邏輯錯誤，也就是程式寫錯了，若發
現了這類錯誤，應該停止程式執行並修正
程式碼，而不是捕捉錯誤時粉飾太平
• 視需求而定，若捕捉錯誤後，當時情境沒
有足夠的資訊可以妥善處理，可就現有資
訊處理完錯誤後，重新拋出原錯誤，或者
是收集資訊後建立新的錯誤拋出
21

22. 堆疊追蹤（Stack Trace）
22

23. 23

24. • 要善用堆疊追蹤，前題是程式碼中不可有
私吞錯誤的行為
• 這樣的程式碼會對應用程式維護造成嚴重
傷害
24

25. • 在使用throw再度拋出同一錯誤實例時，
錯誤的追蹤堆疊起點，仍是錯誤的發生根
源，而不是重拋錯誤的地方
25

26. 26

27. • 如果捕捉錯誤後，拋出了新的錯誤實例，
堆疊追蹤就會中斷
27

28. 28

29. 產生器與錯誤處理
• throw()方法可以指定Error實例，在產
生器函式中拋出例外
• 在拋出例外之後，呼叫產生器的next()方
法不會再有進一步結果
29

30. 30

31. • 如果產生器函式定義流程時，包含了try-
catch語法，而且流程已進入try區塊，呼
叫throw()時指定的Error實例，就可以
被捕捉
31

32. • 流程必須已進入try區塊，錯誤才會被捕捉
• 上面的範例如果沒呼叫過g.next()，就直
接g.throw()的話，主控台會顯示以下的
訊息
32

33. • 在實作Symbol.iterator時，選擇性地
實作return()與throw()方法
33

34. 34

35. 回呼模式錯誤處理
• 在呼叫了非同步函式之後，流程就會離開
了try區塊
• 若非同步的任務執行過程中發生錯誤，已
不是呼叫非同步函式時對應的catch區塊
可處理
35

36. 36

37. • 如果實作非同步任務時採取回呼模式，想
在任務無法執行時處理錯誤，是將Error
實例當成引數傳入回呼函式
37

38. 38

39. 39

40. • 若錯誤真的發生，而程式碼中沒有檢查，
那麼錯誤就會靜悄悄地被忽略了
• 這就好比寫了catch區塊卻內容空白一樣，
對查找臭蟲時是很大的麻煩
• 為了避免被忽略，通常錯誤實例會作為回
呼函式的第一個引數，算是對開發者的基
本提醒：「別忘了檢查錯誤」
40

41. Promise與錯誤處理
• Promise被否決時，表示任務因為某個錯
誤而無法執行下去
• 使用reject否決任務，可以對比為同步流
程時throw錯誤的概念
41

42. • 如果Promise在執行任務時拋出了錯誤，
會隱含地以指定的錯誤物件作為reject的
引數來否決任務
• 在不同的環境中會有不同的呈現方式
– Node.js：
UnhandledPromiseRejectionWarning
– 瀏覽器：Uncaught (in promise)
42

43. • 如果then()指定的回呼函式中拋出了錯誤，
就是否決then()傳回的Promise
43

44. • 如果錯誤沒在then()中處理掉，then()
傳回的Promise也會被否決
• 在形成鏈狀呼叫時，就會類似throw錯誤
時中斷流程的概念
44

45. • then()或catch()是各自獨立的
• 也就是各自傳回Promise，如果then()或
catch()沒有拋出錯誤，傳回的Promise
任務就算達成
45

46. 46

47. • 對於catch()應該理解為，只要沒有再度
拋出錯誤，捕捉錯誤的任務就達成了
• ES9提供了finally()方法，這就可以形
成類似try-catch-finally的風格
47

48. async、await與錯誤處理
• 在async函式throw錯誤，表示任務無法
達成，相當於呼叫Promise的reject時指
定了錯誤物件
48

49. • 在使用await的情況下，結合try-catch
錯誤處理語法上就成了可能
49

50. 非同步產生器與錯誤處理
• 非同步產生器具有throw()方法，呼叫時
傳入錯誤物件，可以在非同步產生器函式
定義的流程中拋出錯誤
• 如果非同步產生器函式中定義了try-
catch，而且流程已經在try區塊中，那麼
錯誤就可以被catch捕捉處理
50

51. 51

52. • 如果非同步產生器函式中沒有處理錯誤的
話，由於本質上也是個async函式，拋出
錯誤相當於否決任務，必須在throw()方
法傳回的Promise中進行處理
52