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