JS异常及异常处理

在开发程序的过程中，我们经常遇到各种各样、稀奇古怪的错误，导致程序无法正常的运行。通常看到控制台一片红彤彤，我们心里通常有一万只草泥马跑过🐎🐎🐎。。。对于在控制台爆出的这些错误，我们用专业术语称之为异常。异常的出现，并非为坏事。如果我们理解出现的异常，并及时定位处理异常，就能让自己的代码减少错误。并且我们有时候还会去故意抛出异常。

---

 

目录

⛳异常

1.异常的分类

2.异常的执行流程 

 ⛳异常处理

1.throw抛异常

🚩语法

🚩应用场景 

2.try/catch捕获异常

🚩语法

🚩应用场景

3.debugger

语法

---

⛳异常

在程序中因为语法的疏忽或其他原因而导致程序中途崩溃的情况，我们称之为异常。

在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. 自动创建对应的异常对象，抛出错误
2. 程序终止运行
3. 控制台会显示异常对象

---

 ⛳异常处理

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

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，表示一个断点。浏览器代码执行到该位置时，会停下来，进入调试模式。