JavaScript 中的异常处理

异常表示存在需要特殊处理技术的异常情况。从编程的角度来看，异常是指打破代码正常流程的异常代码。这类异常需要专门的编程结构来处理。

什么是异常处理？

在编程中，异常处理是指用于处理代码中的异常语句并执行它们的流程或方法。它还能够处理代码/程序的流程控制。为了处理代码，会使用各种处理程序来处理异常并执行代码。例如，非零值除以零将始终导致无穷大，这是一个异常。因此，借助异常处理，可以执行和处理它。

throw 语句用于引发异常。这意味着当发生异常情况时，使用 throw 来抛出异常。抛出的异常通过将代码包装在 try…catch 块中来处理。如果存在错误，则执行 catch 块，否则只执行 try 块中的语句。

因此，在编程语言中，可能存在不同类型的错误会干扰程序的正常执行。

什么是 JavaScript 错误？

在 JavaScript 中，错误是指阻止代码按预期运行的问题。它可能发生在开发者在网站开发过程中，当存在编程错误、输入不正确或其他导致程序出错的错误时。

错误类型

在编码过程中，代码中可能存在三种类型的错误。

1. 语法错误：当用户在编程语言的预定义语法中犯错时，可能会出现语法错误。
2. 运行时错误：当程序执行期间发生错误时，这类错误称为运行时错误。导致运行时错误的代码称为异常。因此，异常处理程序用于处理运行时错误。它包括 TypeError、ReferenceError、RangeError 等。
3. 逻辑错误：当程序存在任何逻辑错误导致无法产生期望的输出，并且可能异常终止时，发生的错误称为逻辑错误。它包括错误的条件、错误的变量使用等。

错误对象

当发生运行时错误时，会创建一个 Error 对象并抛出它。这样的对象也可以用作用户定义异常的基础。错误对象有两个属性：

1. name：这是一个对象属性，用于设置或返回错误名称。
2. message：此属性以字符串形式返回错误消息。

JavaScript 还提供了几种标准的内置错误类型或错误构造函数。让我们通过示例来理解每种错误。

1. SyntaxError：当解析 eval() 时可能发生语法错误时，会创建一个实例。

示例

让我们来看一个 SyntaxError 的例子。

输出

true
SyntaxError
Unexpected token ';'

说明

在上面的代码中，我们使用 try-catch 语句处理了错误。我们创建了一个 try 块。在 try 块中，eval() 尝试评估一个 JavaScript 字符串。这里，'var a = ;' 是无效代码。因此，它会抛出语法错误，然后 catch 块会捕获该错误并将其存储在变量 error 中。

2. EvalError：它创建一个错误实例，该错误发生在 eval() 中，eval() 是一个用于评估 JavaScript 字符串的全局函数。

示例

让我们来看一个 EvalError 的例子。

输出

true
An EvalError has occurred
EvalError

说明

在上面的示例中，我们使用 try 和 catch 语句处理了错误。我们创建了一个 try 块。在 try 块中，我们编写了 throw new EvalError 并附带自定义消息。这里，抛出的错误存储在变量 e 中。console.log(e instanceof EvalError) 定义在此处，用于检查捕获的错误是否是 EvalError 的实例。如果是，则打印 true。console.log(e.message) 打印 "An EvalError has occurred"，而 console.log(e.name) 打印错误名称和错误类型。

3. RangeError：当数字变量或参数超出其有效范围时，会创建一个错误实例。

示例

让我们来看一个 RangeError 的例子。

输出

Runtime Error:
/box/script.js:2
      if (num < 30) throw new RangeError("It is a wrong Number");
                    ^

RangeError: It is a wrong Number

说明

在上面的示例中，我们定义了一个名为 numRange 的箭头函数。它检查给定的数字是否小于 30。如果是，则抛出带有消息 "RangeError: It is a wrong Number" 的 RangeError。当我们使用 20 调用函数时，条件变为 true。因此，抛出了错误，并显示了原因。

4. ReferenceError：当解引用无效引用时，会创建一个错误实例。

示例

让我们看一个 ReferenceError 的例子。

输出

Runtime Error:
/box/script.js:1
console.log(abc);
             ^

ReferenceError: abc is not defined

说明

在上面的示例中，代码 console.log(abc) 抛出了错误，因为我们没有定义它。它抛出了一个 ReferenceError。

5. TypeError：当变量的类型无效时，会为此类错误创建实例。

示例

让我们来看一个 TypeError 的例子。

输出

Runtime Error:
/box/script.js:2
console.log(myNum.split(""));
                  ^

TypeError: myNum.split is not a function

说明

在上面的示例中，我们使用 let 声明了一个名为 myNum 的变量，并为其分配了数字 30。在这里，我们尝试对数字使用字符串方法，使用 console.log(myNum.split("")，这抛出了一个 TypeError。

6. URIError：当向 encodeURI() 或 decodeURI() 传递无效参数时，会创建一个错误实例。

示例

让我们通过例子来理解这一点。

输出

https://tpointtech.cn/
Runtime Error:
/box/script.js:2
console.log(decodeURI("%tpoint"));
            ^

URIError: URI malformed

说明

在上面的示例中，我们使用 decodeURI 解码了一个有效的 URI 字符串。首先，我们将原始 URI 记录到控制台，然后，我们传递了一个无效的编码字符串 %tpoint，这会抛出 URIError，因为 %t 不是有效的 URI 转义序列。

7. 自定义错误：自定义错误是由开发人员创建的错误，用于提供对我们的应用程序有意义的消息。它以易于理解和修复的方式准确地解释了出了什么问题。

示例

让我们来看一个例子。

输出

Runtime Error:
/box/script.js:1
throw new Error("Custom error happened");
^

Error: Custom error happened

解释：在上面的代码中，我们抛出了一个自定义错误。我们通过错误向用户传递了一条消息。

异常处理语句

以下语句处理发生的任何异常：

• throw 语句
• try…catch 语句
• try…catch…finally 语句。

我们将通过示例逐一介绍。

throw 语句

借助 throw 语句，我们可以抛出自定义错误。

示例

让我们来看一个例子来理解 throw 语句。

输出

Runtime Error:
Age must be 18 or above

说明

在上面的示例中，我们声明了一个名为 verifyAge() 的函数。声明的 verifyAge() 函数用于验证年龄值是否小于 18。如果年龄小于 18，则会抛出错误，并显示消息 "Age must be 18 or above"。verifyAge() 函数在 try 块内调用，并将 16 作为参数传递。它验证 16 是否小于 18。因此，抛出了错误。

try…catch 语句

在 try…catch 语句中，会发生以下情况：

• Try Block：它包含可能抛出错误的代码。
• Catch Block：它包含当 try 块中出现任何错误时执行的代码。

语法

示例

让我们来看一个 try…catch 语句的例子。

输出

Execution completed
Runtime Error:
Error occurred: Cannot divide by zero

说明

在上面的示例中，try 块将 10 除以 0。输出将是 Infinity。然后它使用 isFinite() 函数验证结果是否为有限数字。这里，除法返回 Infinity，catch 块捕获抛出的错误并向控制台显示消息 "Error occurred: Cannot divide by zero"。

try…catch…finally 语句

try…catch…finally 语句与 Try…catch 相同，但我们添加了一个 finally 块，它始终运行。

• Try Block：Try 块包含可能抛出错误的代码。
• Catch Block：它包含当 try 块中出现任何错误时执行的代码。
• Finally Block：此块包含的代码始终执行，无论是否发生错误。

语法

示例

让我们来看一个 try…catch…finally 的例子。

输出

Execution completed
Runtime Error:
Error occurred: Cannot divide by zero

说明

在上面的示例中，我们使用 try-catch 处理了错误。这里我们将 10 除以 0，并使用 isFinite() 检查结果是否有限。如果它不是有限的，它会抛出错误，并附带消息 "Error occurred: Cannot be divided by zero"。

JavaScript Async/Await 中的异常传播

当开发人员在 JavaScript 中编写异步代码时，理解异常在 JavaScript 中的传播方式非常重要。在 JavaScript 的异步代码中，异步函数中发生的任何错误都会传播到 await 调用。这使得异常处理非常易于使用。

输出

Runtime Error:
Error fetching data: fetch is not defined

说明

在上面的示例中，我们使用 try..catch 处理了错误。我们定义了一个名为 fetchData() 的异步 function，并在其中声明了一个 try-catch 块。在 try 块中，我们尝试使用 fetch 来获取 API。在 catch 块中，如果 API 获取失败，我们会给出一条消息。在此示例中，它抛出错误并显示 "Error fetching data: fetch is not defined"。

异常处理的优点

异常处理的优点如下：

• 优雅处理：它能优雅地处理错误。如果发生任何错误，代码将继续顺利运行。
• 错误日志记录：这很有帮助，因为它会记录错误的详细信息，有助于您定位和修复问题。
• 防止崩溃：当应用程序无法处理某些数据时，它可以防止应用程序崩溃。
• 增强程序健壮性和稳定性：异常处理可防止错误并处理它们，使应用程序更能抵抗意外情况。它使程序更加健壮和稳定。
• 更好的用户体验：当我们使用异常处理时，我们可以向用户显示有意义的消息，而不是突然崩溃或晦涩的错误消息。它有助于用户理解问题。

JavaScript 异常处理的最佳实践

以下是使用 JavaScript 异常处理的一些最佳实践：

• 始终只将可能抛出异常的代码块放在 try 块中。避免在 try 块中包含无关的代码。
• 我们应该使用日志记录异常，以确保我们捕获足够详细的信息用于调试。
• 它会创建自定义错误类来表示特定的错误条件。这有助于我们通过提供清晰的错误类型来更轻松地进行调试。
• finally 块始终在 try 或 catch 块之后运行。我们应该利用它进行资源清理。例如，关闭文件和清除超时。

全局错误处理

当我们构建基于浏览器的 JavaScript 应用程序时，即使我们非常小心地处理了代码中的所有异常，有时也会遇到意外的错误。为了避免这类异常，建议使用全局错误处理机制。

我们可以利用 window.onerror 事件监听器来实现它。此方法可用于捕获浏览器中发生的所有未捕获的错误。它提供了一种记录这些错误或以语义方式响应它们的方法。

返回 true 可防止浏览器默认记录错误。如果您想记录错误但仍在控制台中看到它们，请返回 false 或删除 return 语句。

结论

异常处理对于处理错误非常有用。我们可以防止我们的应用程序显示意外错误。开发人员应该在其程序中使用异常处理。在本文中，我们涵盖了异常处理中的每个重要主题。通过利用异常处理，我们可以构建健壮的代码，这些代码可以轻松调试和修复。

常见问题

1. 在 JavaScript 中，什么是异常处理，为什么它很重要？

在 JavaScript 中，异常处理是指在程序执行期间发生的异常事件的处理。它帮助开发人员优雅地处理这些错误。它在防止应用程序崩溃方面起着至关重要的作用。它维持代码的正常流程。

2. 在一个单独的 catch 块中，如何处理多个异常？

我们可以利用 || (或) 运算符来维护多个异常。我们可以在同一个 catch 块中处理不同类型的异常。我们还可以在 catch 块中使用 instanceof 运算符 来检查错误的类型并进行相应处理。

3. throw 语句在 JavaScript 中是如何工作的？

在 JavaScript 中，我们使用 throw 语句来创建异常。我们可以抛出任何值，但抛出继承自内置 Error 对象的对象是很好的。它提供了关于错误的有用信息。

4. 在 JavaScript 中，语法错误和逻辑错误有什么区别？

当代码违反 JavaScript 的任何规则时，就会发生语法错误。它阻止代码执行。而逻辑错误发生在代码成功执行但产生意外结果时。

5. 如何处理 JavaScript 中的运行时错误？

可以使用 try、catch 和 finally 块来处理运行时错误。catch 块帮助我们获取错误并显示用户定义的错误消息，而不会中断程序。