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