【零基础学JS - 27 】JavaScript中的 try...catch...finally 语句

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

try、catch 和 finally 块用于处理异常（一种错误类型）。在了解它们之前，你需要了解编程中的错误类型。

错误类型

在编程中，代码可能存在两种类型的错误：

• 语法错误：语法错误。例如，如果你编写 consol.log(‘your result’);，上述程序将抛出语法错误。上述代码中的 console 拼写错误。

• 运行时错误：程序执行期间发生的错误。例如，调用无效的函数或变量。

在运行时发生的这些错误称为异常。现在，让我们看看如何处理这些异常。

try…catch 语句

try…catch 语句用于处理异常。它的语法如下：

try {
    // try 块的代码
} 
catch(error) {
    // catch 块的代码  
}

主要的代码位于 try 块中。在执行 try 块时，如果发生任何错误，它将进入 catch 块。catch 块根据 catch 语句处理错误。

如果没有发生错误，则执行 try 块中的代码，并跳过 catch 块。

示例 1：显示未声明的变量

// 在程序中展示 try...catch

const numerator = 100, denominator = 'a';

try {
    console.log(numerator/denominator);

    // 忘记定义变量 a      
    console.log(a);
}
catch(error) {
    console.log('捕获到一个错误'); 
    console.log('错误信息：' + error);  
}

输出：

NaN
捕获到一个错误
错误信息：ReferenceError: a is not defined

在上述程序中，变量 a 没有被定义。当你尝试打印变量 a 时，程序会抛出一个错误。该错误被 catch 块捕获。

try…catch…finally 语句

你还可以使用 try…catch…finally 语句来处理异常。无论代码运行成功还是发生错误，finally 块都会执行。

try…catch…finally 块的语法如下：

try {
    // try 块的代码
} 
catch(error) {
    // catch 块的代码  
}
finally() {
    // 无论如何都会执行的代码
}

示例 2：try…catch…finally 示例

const numerator = 100, denominator = 'a';

try {
    console.log(numerator/denominator);
    console.log(a);
}
catch(error) {
    console.log('捕获到一个错误'); 
    console.log('错误信息：' + error);  
}
finally {
    console.log('finally 会每次执行');
}

输出：

NaN
捕获到一个错误
错误信息：ReferenceError: a is not defined
finally 会每次执行

在上述程序中，发生了一个错误，并且该错误被 catch 块捕获。无论程序是否成功运行或发生错误，finally 块都会执行。

注意：你需要在 try 语句后使用 catch 或 finally 语句。否则，程序将抛出错误 Uncaught SyntaxError: Missing catch or finally after try。

JavaScript 中的 try…catch 在 setTimeout 中的使用

如果异常发生在 “计时” 代码中，如 setTimeout() 中，try…catch 将无法捕获异常。例如，

try {
    setTimeout(function() {
        // 代码中的错误
    }, 3000);
} catch (e) {
    console.log( "不起作用" );
}

上述 try…catch 不起作用，因为引擎已经离开了 try…catch 结构，而函数稍后执行。

要在定时函数内捕获异常，try…catch 块必须位于该函数内部。例如，

setTimeout(function() {
    try {
        // 代码中的错误
    } catch {
        console.log( "捕获到错误" );
    }
}, 3000);

你还可以使用 throw 语句与 try…catch 语句结合使用来使用用户定义的异常。例如，某个数字被 0 除。如果你希望将 Infinity 视为程序中的错误，则可以使用 throw 语句抛出用户定义的异常来处理该情况。