JavaScript try…catch…finally

摘要：在本教程中，您将学习如何使用 JavaScript try...catch...finally 语句捕获异常并执行代码块，无论异常是否发生。

JavaScript try…catch…finally 语句简介

try...catch 语句允许您捕获异常并优雅地处理它们。有时，您希望无论异常是否发生都执行代码块。在这种情况下，您可以使用以下语法的 try...catch...finally 语句。

try {
  // code may cause exceptions
} catch (error) {
  // code to handle exceptions
} finally {
  // code to execute whether exceptions occur or not
}
Code language: JavaScript (javascript)

在此语法中，finally 代码块始终在 try 和 catch 代码块完成后执行，无论异常是否发生。

以下流程图说明了 try...catch...finally 的工作原理。

JavaScript try…catch…finally 语句示例

以下示例说明了如何使用 try...catch...finally 语句。

let result = 0;
try {
  result = add(10, 20);
} catch (e) {
  console.log(e.message);
} finally {
  console.log({ result });
}Code language: JavaScript (javascript)

输出

add is not defined
{ result: 0 }Code language: CSS (css)

工作原理。

首先，声明 result 变量并将其值初始化为 0。

let result = 0;Code language: JavaScript (javascript)

其次，在 try 代码块中调用 add() 函数并将返回值赋予 result 变量。由于 add() 函数不存在，因此 JavaScript 引擎会抛出异常。

由于异常，catch 代码块中的语句会执行以显示错误消息。

第三，在 try 代码块中将 result 输出到控制台。

在以下示例中，我们定义了 add() 函数并在 try 代码块中调用它。

const add = (x, y) => x + y;

let result = 0;

try {
  result = add(10, 20);
} catch (e) {
  console.log(e.message);
} finally {
  console.log({ result });
}
Code language: JavaScript (javascript)

输出

{ result: 30 }Code language: CSS (css)

由于 add() 函数存在，因此在 try 代码块中不会发生异常。因此，finally 代码块输出 result 变量的值，即 10 和 20 的总和。

在这两个示例中，finally 代码块始终运行。

try…catch…finally 和 return

finally 代码块始终执行，无论异常是否发生。此外，您无法阻止它执行，包括使用 return 语句。例如

function fn() {
  try {
    return 1;
  } catch {
    return 2;
  } finally {
    return 3;
  }
}

console.log(fn());
Code language: JavaScript (javascript)

输出

3

在此示例中，try 代码块中的 return 语句返回 1。因此，fn() 函数应该返回 1。然而，情况并非如此。

由于 finally 代码块始终执行，因此 finally 代码块中的 return 语句返回 3。因此，fn() 函数返回 3。

换句话说，try...catch...finally 语句会忽略 try 和 catch 代码块中的 return 语句。

总结

• 在 try...catch...finally 语句中使用 finally 子句来执行代码块，无论异常是否发生。
• try...catch...finally 语句会忽略 try 和 catch 代码块中的 return 语句，因为 finally 代码块始终执行。