JS 使用try catch捕獲異常

JS 使用try catch捕獲異常

部落格說明

文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

簡介

前端是攻克客戶的先鋒，需要特別注意到使用者體驗。在開發中，由於各種問題，異常的出現時不可控的，所以需要對異常進行處理，優化使用者體驗。

try catch finally使用

try語句允許定義在執行時進行錯誤測試的程式碼塊。

catch 語句允許定義當 try 程式碼塊發生錯誤時，所執行的程式碼塊。

finally 語句在 try 和 catch 之後無論有無異常都會執行。

注意點： catch 和 finally 語句都是可選的，但在使用 try 語句時必須至少使用一個。當錯誤發生時， JavaScript 會停止執行，並生成一個錯誤資訊。可以使用 throw語句 來建立自定義訊息(丟擲異常)

try {
    // tryCode - 嘗試執行程式碼塊
}
catch(err) {
    // catchCode - 捕獲錯誤的程式碼塊
}
finally {
    // finallyCode - 無論 try / catch 結果如何都會執行的程式碼塊
}

異常處理的必要

增強使用者體驗，準確定位問題，完善的前端處理方案，比如前端監控系統

異常處理的場景

JS 語法錯誤、程式碼異常

Promise 異常

Iframe 異常

跨域異常

介面請求AJAX 請求異常

靜態資源匯入載入異常

try catch的注意點

只能捕獲到同步的異常，不能捕獲語法和非同步的異常，在日常使用中需要注意

// 不能捕獲語法的異常
try { 
  let name = 'aaa   // 少寫'
  } catch(e) {
  console.log('捕獲到異常：',e); 
}
// VM421:1 Uncaught SyntaxError: Unexpected identifier

// 不能捕獲非同步的異常
try { 
  setTimeout(() => { 
    console.log(a) // 未宣告a變數
  }, 1000) } catch(e) { 
  console.log('捕獲到異常：',e); 
} 
// blog.js:1 Uncaught ReferenceError: a is not defined

感謝

萬能的網路

菜鳥教程

阮一峰的es6語法教程

以及勤勞的自己，個人部落格，GitHub