在开发程序的过程中,我们经常遇到各种各样、稀奇古怪的错误,导致程序无法正常的运行。通常看到控制台一片红彤彤,我们心里通常有一万只草泥马跑过🐎🐎🐎。。。对于在控制台爆出的这些错误,我们用专业术语称之为异常。异常的出现,并非为坏事。如果我们理解出现的异常,并及时定位处理异常,就能让自己的代码减少错误。并且我们有时候还会去故意抛出异常。
目录
⛳异常
在程序中因为语法的疏忽或其他原因而导致程序中途崩溃的情况,我们称之为异常。
在JavaScript中异常表现为一个对象,异常对象中包含了二个信息:程序异常的类型、原因以及出程序异常出现的位置。
不同的对象表达了不同的异常类型,不同类型的异常对应到不同的错误
1.异常的分类
异常类型 | 含义 |
SyntaxError | 语法错误 |
ReferenceError | 引用错误,使用了不存在的变量或函数 |
TypeError | 类型错误,往往是使用了一个对象中不存在的成员 |
RangeError | 范围错误,通常在操作超出有效范围时发生,如数组访问超出边界 |
URIError | URI错误,通常发生在encodeURI()或者decodeURI()等方法时给出无效的URI时发生 |
EvalError | eval错误,通常在eval()函数中执行代码时发生错误 |
InternalError | 内部错误,通常发生在Javascript引擎内部发生错误导致 |
自定义异常
为了满足各种各样的业务需求,除了上面这些给定的异常类型之外,我们还可以自定义异常类型。这就可以向最终用户提供更具体、信息更丰富的错误消息。
Error的属性主要有name和message,分别设置或返回错误名和错误消息。
function CustomException(message) {
this.name = "CustomException";
this.message = message;
}
CustomException.prototype = new Error();
CustomException.prototype.constructor = CustomException;
throw new CustomException("This is a custom exception message.");
2.异常的执行流程
当代码在执行过程中遇到了错误,会经过以下几个流程:
- 自动创建对应的异常对象,抛出错误
- 程序终止运行
- 控制台会显示异常对象
⛳异常处理
异常处理是指预估代码执行过程中可能发生的错误,然后最大程度的避免错误的发生导致整个程序无法继续运行
1.throw抛异常
🚩语法
throw抛出异常信息,程序会终止执行!!!
function fn(x, y) {
if (!x || !y) {
throw '没有参数传递进来' //throw后面跟的是错误提示信息
}
return x + y;
}
console.log(fn())
Error对象配合throw使用,能够设置更详细的错误信息,具体提示到几行出现错误
function fn(x, y) {
if (!x || !y) {
throw new Error('没有参数传递过来')
// throw '没有参数传递进来'
}
return x + y;
}
console.log(fn())
🚩应用场景
1️⃣可以预知某段代码可能会发生错误
2️⃣浏览器不会自动抛出该错误
3️⃣该函数无法处理这个错误
2.try/catch捕获异常
🚩语法
通过try/catch捕获错误信息(浏览器提供的错误信息)try试试 catch拦住 finally最后
将预估可能发生错误的代码写在try代码段中
如果try代码段中出现错误后,会执行catch代码段,并且捕获到错误信息
finally 不管是否有错误,都会执行
function fn() {
try {
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (error) {
// 拦截错误,提示浏览器提供的错误信息,但是不中断程序的执行
console.log(error.message)
//按需要加return终端程序
// return
}
finally {
console.log('对错都会走到这一步')
}
console.log('不中断程序的执行')
}
console.log(fn())
🚩应用场景
1️⃣浏览器兼容
浏览器的兼容性是程序员很头痛的事儿,往往一些出错会让我们查找许久, 在使用try catch能更好的解决兼容性出错的问题: 由于不同浏览器报错提示也不尽相同,通过使用try catch捕获的浏览器的报错提示, 来判断用户使用的浏览器,然后做出对应的解决方法; 那么,你如果用if,就只能反馈真或假,而不能直接抛出浏览器的报错内容。
比如:Ajax话的web中,利用JavaScript的try/catch程序块去支持所有主流浏览器
function createXHR() {
var xhr;
try {
xhr = new ActiveXObject("Msxm12.XMLHTTP");
} catch (E) {
xhr = false;
}
}
if(!xhr && typeof XMLHttpRequest != 'undefined'){
xhr = new XMLHttpRequest();
}
return xhr;
}
2️⃣防止阻塞
前后端接口交接,因为那里前后台的参数有时候是未知的,使用try...catch正合适
// 执行解析
try {
let result = JSON.parse(xhr.responseText)
success(result)
} catch (err) {
error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
}
}
判断代码非法性,window.a.b是非法的,再跟2对比就没有意义,这样非法的条件,在try catch中仍可以继续运行下去
try {
window.a.b !== 2
}
catch(err){
alert(err) // 可执行
alert(123) // 可执行
}
if (window.a.b !== 2) {
alert("error") // 不执行
}
alert(123); // 不执行
3️⃣给用户更好的体验
比如网络请求,出现错误的情况,用户在断网的情况下,我们捕获错误后应该提醒用户
try {
// 正常流程
} catch (e) {
// 弹个框告诉用户不好意思出了点问题
// 如果是用户的错就告诉用户什么地方错了
// 如果是程序的错,就告诉用户不好意思没法执行
}
3.debugger
语法
在代码中需要打断点的地方,加上 debugger
,表示一个断点。浏览器代码执行到该位置时,会停下来,进入调试模式。