【JavaScript】try、catch、finally 使用

scorpion_V

已于 2025-01-14 11:15:00 修改

阅读量1.3k

点赞数 25

文章标签： javascript vue.js 面试

于 2025-01-14 11:13:35 首次发布

本文链接：https://blog.youkuaiyun.com/scorpion_V/article/details/145130295

版权

当在 JavaScript 中写代码时，有时候我们会遇到一些潜在的错误，例如网络请求失败了或函数调用出错了。这些错误可能导致程序崩溃，从而影响用户体验。为了解决这个问题，JavaScript 提供了 try、 catch 和 finally 来帮助我们优雅地处理这些异常情况。

`try` 块

try 块是一个包裹可能抛出异常的代码的语句集合。
catch 块会捕获 try 块中的异常，并且 catch 块会接受一个参数（通常命名为 error 或 e），用于表示捕获到的错误信息。

try...catch 的基本语法结构如下：

try {
  // 可能会抛出异常的代码块
  const result = someFunction();
} catch (error) {
  // 处理异常的代码块
  console.error(error.message);
}

在这个例子中，someFunction() 可能会抛出异常，如果这种情况确实发生了，代码会跳转到 catch 块。 catch 块接收一个参数 error，它是一个对象，包含有关抛出的异常的信息。我们可以使用 error.message 访问错误消息，并将其记录到控制台。

延伸问题：捕获并处理异常（ throw ）

在实际开发中，我们往往会遇到网络请求失败、用户输入错误等异常情况，这时候我们可以使用 try...catch 来捕获这些异常并进行处理。

以下使用捕获除零错误的示例：

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("Division by zero is not allowed!");
    }
    return a / b;
  } catch (error) {
    console.log("Error:", error.message);
    return null;  // 返回 null 以表示错误
  }
}

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // Error: Division by zero is not allowed! null

throw 语句用于主动抛出错误，我们可以通过它自定义错误信息。
捕获到错误后，可以在 catch 语句中处理，避免程序中断。

`finally` 块

finally 块是可选的，它会在 try 或 catch 块完成后无论如何都会运行。这意味着，在函数返回之前，无论是否发生了异常，您都可以在 finally 块中执行某些操作。

try...catch...finally 的基本语法结构如下：

function fetchData(url) {
  let connection = null;
  try {
    connection = openConnection(url);  // 假设这是一个开连接的操作
    let data = connection.requestData();  // 假设这是一项网络请求操作
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
  } finally {
    if (connection) {
      connection.close();  // 确保无论如何都关闭连接
      console.log("Connection closed.");
    }
  }
}

finally 常用于清理操作，比如释放资源、关闭文件连接等。
无论 try 块是否抛出异常，finally 中的代码都会执行。

延伸问题：try 好用，是否可以直接替换 .then

try-catch 块通常用于捕获同步代码块中可能出现的异常，例如操作未定义的变量或调用不存在的函数等。而 Promise 的 .then() 方法在处理异步操作时，不能直接使用 try-catch 来替换。
当我们使用 Promise 时，如果发生错误，我们需要使用 .catch() 方法来捕获错误并处理它们。.catch() 方法会在 Promise 中抛出任何错误时执行，并且在 promise 链条上终止。

以下是使用 .catch() 和 try-catch 的示例：

// 使用 try-catch 处理同步代码块中的异常
function example1() {
  try {
    const result = someFunction(); // 可能会抛出异常的代码块
  } catch (error) {
    console.error(error.message); // 处理异常的代码块
  }
}

// 使用 Promise.catch() 处理异步操作中的异常
function example2() {
  somePromiseFunction()
    .then(result => {
      // 处理 Promise 成功的结果
    })
    .catch(error => {
      console.error(error.message); // 处理 Promise 失败的原因
    });
}

在第一个例子中，我们使用 try-catch 块来处理同步代码块中的异常。而在第二个例子中，我们使用 Promise 提供的 .then() 和 .catch() 方法处理异步代码块中的异常，其中 .catch() 在 Promise 发生异常时被触发，并处理异常情况。

总的来说，虽然 try-catch 可以用于同步代码块中的异常处理，但是在使用 Promise 时，我们需要使用 .catch() 方法来处理异步操作中的错误。

异步代码中的错误处理

在处理异步代码时，try...catch 也非常有用，尤其是结合 async/await 使用时。

以下结合 async/await 使用异常处理的示例：

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error("Fetching data failed:", error.message);
  }
}

fetchData();