剖析前端异常及降级处理，web开发题

• ReferenceError

• SyntaxError

• TypeError

• URIError

Error

Error是所有错误的基类，其他错误都继承自该类型

EvalError

EvalError对象表示全局函数eval()中发生的错误。如果eval()中没有错误，则不会抛出该错误。可以通过构造函数创建这个对象的实例

image.png

RangeError

RangeError对象表示当一个值不在允许值的集合或范围内时出现错误。

image.png

ReferenceError

当引用不存在的变量时，该对象表示错误：

image.png

SyntaxError

当JavaScript引擎在解析代码时遇到不符合该语言语法的标记或标记顺序时，将引发该异常：

image.png

TypeError

传递给函数的操作数或实参与该操作符或函数期望的类型不兼容：

image.png

URIError

当全局URI处理函数以错误的方式使用时：

image.png

四、处理和防范

---

上文我们提到错误和异常无处不在，存在于各式各样的应用场景中，那我们应该如何有效的拦截异常，将错误扼杀于摇篮之中，让用户无感呢？亦或者遇到致命错误时，进行降级处理？

(1) try catch

1.语法

ECMA-262 第 3 版中引入了 try-catch作为 JavaScript 中处理异常的一种标准方式，基本的语法如下所示。

try {

// 可能会导致错误的代码

} catch (error) {

// 在错误发生时怎么处理

}

复制代码

2.动机

使用try…catch来捕获异常，我归纳起来主要有两个动机：

1）是真真正正地想对可能发生错误的代码进行异常捕获；

2）我想保证后面的代码继续运行。

动机一没什么好讲的，在这里，我们讲讲动机二。假如我们有以下代码：

console.log(foo); //foo未定义

console.log(‘I want running’)

复制代码

代码一执行，你猜怎么着？第一行语句报错了，第二行语句的log也就没打印出来。如果我们把代码改成这样：

try{

console.log(foo)

}catch(e){

console.log(e)

}

console.log(‘I want running’);

复制代码

以上代码执行之后，虽然还是报了个ReferenceError错误，但是后面的log却能够被执行。

从这个示例，我们可以看出，一旦前面的（同步）代码出现了没有被开发者捕获的异常的话，那么后面的代码就不会执行了。所以，如果你希望当前可能出错的代码块后续的代码能够正常运行的话，那么你就得使用try…catch来主动捕获异常。

扩展：

实际上，出错代码是如何干扰后续代码的执行，是一个值得探讨的主题。下面进行具体的探讨。因为市面上浏览器众多，对标准的实现也不太一致。所以，这里的结论仅仅是基于Chromev91.0.4472.114。探讨过程中，我们涉及到两组概念：同步代码与异步代码，代码书写期和代码运行期。

场景一：同步代码（出错） + 同步代码

1625024247(1).png

可以看到，出错的同步代码后面的同步代码不执行了。

场景二：同步代码（出错） + 异步代码