JS `try-catch-finally` 的高级应用与异常链追踪 (`Error.cause`)

各位观众老爷们，大家好！我是今天的主讲人，咱们今天聊聊JavaScript里 try-catch-finally 这一块，再顺便聊聊异常链追踪，看看这俩玩意儿能玩出什么高级花样。

开场白：try-catch-finally，你以为你懂了？其实…

try-catch-finally 结构，各位肯定见过，甚至用烂了。简单来说，就是把可能出错的代码放到 try 块里，如果出错了，就执行 catch 块里的代码来处理错误，最后无论有没有出错，都执行 finally 块里的代码。

但是！你真的掌握了它的所有用法了吗？你确定你真的能把 try-catch-finally 用到炉火纯青的地步了吗？今天咱们就深入挖掘一下。

第一部分：try-catch-finally 的基础回顾与再认识

首先，咱们简单回顾一下基础语法：

try {
  // 可能会抛出异常的代码
  let result = someFunction();
  console.log("函数执行结果:", result);
} catch (error) {
  // 捕获异常并处理
  console.error("发生错误:", error.message);
  // 可以选择重新抛出异常，或者做一些其他的处理
} finally {
  // 无论是否发生异常，都会执行的代码
  console.log("finally 代码块执行了");
}

这个结构很简单，但是有几个点需要注意：

try 块必须要有 catch 或 finally 块与之配对。单独一个 try 块是没有任何意义的。
catch 块可以省略。如果你只想在无论如何都执行一些代码，而不想处理错误，可以只使用 try-finally 结构。
finally 块中的 return 语句会覆盖 try 或 catch 块中的 return 语句。这个特性需要特别注意，稍不留神就会掉坑里。

举个例子：

function testFinallyReturn() {
  try {
    return "try";
  } finally {
    return "finally";
  }
}

console.log(testFinallyReturn()); // 输出 "finally"

看到了吗？try 块里的 return 被 finally 块里的 return 覆盖了。

第二部分：try-catch-finally 的高级用法：嵌套与控制流

try-catch-finally 结构可以嵌套使用，这能让你更精细地控制错误处理流程。

function outerFunction() {
  try {
    // 外部 try 块
    console.log("outer try start");
    innerFunction();
    console.log("outer try end");
  } catch (outerError) {
    // 外部 catch 块
    console.error("Outer catch:", outerError.message);
  } finally {
    // 外部 finally 块
    console.log("outer finally");
  }
}

function innerFunction() {
  try {
    // 内部 try 块
    console.log("inner try start");
    throw new Error("Inner Error");
    console.log("inner try end"); // 这行不会执行
  } catch (innerError) {
    // 内部 catch 块
    console.error("Inner catch:", innerError.message);
    //可以选择重新抛出异常，让外部catch处理
    //throw innerError;
  } finally {
    // 内部 finally 块
    console.log("inner finally");
  }
}

outerFunction();

// 输出结果：
// outer try start
// inner try start
// Inner catch: Inner Error
// inner finally
// outer finally

在这个例子中，innerFunction 内部抛出了一个异常，被内部的 catch 块捕获并处理了。如果没有内部的 catch 块，异常会一直冒泡到外部的 catch 块。

重点来了：控制流的灵活运用

try-catch-finally 不仅仅是处理错误的工具，它还可以用来控制程序的流程。比如，你可以利用 finally 块来确保某些资源得到释放，即使在发生错误的情况下。

function processFile(filePath) {
  let fileHandle = null;
  try {
    fileHandle = openFile(filePath);
    // 处理文件内容
    processFileContent(fileHandle);
  } catch (error) {
    console.error("处理文件时发生错误:", error.message);
  } finally {
    if (fileHandle) {
      closeFile(fileHandle); // 确保文件被关闭
      console.log("文件已关闭");
    }
  }
}

function openFile(filePath) {
  // 模拟打开文件
  console.log("打开文件:", filePath);
  return { filePath: filePath }; // 返回一个模拟的文件句柄
}

function processFileContent(fileHandle) {
  // 模拟处理文件内容
  console.log("处理文件内容:", fileHandle.filePath);
  // 模拟抛出一个异常
  throw new Error("处理文件内容时发生错误");
}

function closeFile(fileHandle) {
  // 模拟关闭文件
  console.log("关闭文件:", fileHandle.filePath);
}

processFile("example.txt");

// 输出结果：
// 打开文件: example.txt
// 处理文件内容: example.txt
// 处理文件时发生错误: 处理文件内容时发生错误
// 关闭文件: example.txt
// 文件已关闭

在这个例子中，无论 processFileContent 函数是否抛出异常，finally 块都会确保文件被关闭，避免资源泄漏。

第三部分：异常链追踪：Error.cause 的妙用

在复杂的应用中，一个错误往往是由多个原因引起的。为了更好地诊断问题，我们需要追踪错误的根源。这时候，Error.cause 就派上用场了。

Error.cause 是 ES2022 引入的一个新特性，它允许你在抛出新的错误时，指定导致这个错误的原始错误。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    throw new Error(`Failed to fetch data from ${url}`, { cause: error });
  }
}

async function processData(url) {
  try {
    const data = await fetchData(url);
    // 处理数据
    console.log("数据处理成功:", data);
  } catch (error) {
    console.error("数据处理失败:", error.message);
    console.error("原始错误:", error.cause);
  }
}

processData("https://api.example.com/data"); // 假设这个URL不存在

// 输出结果（示例）：
// 数据处理失败: Failed to fetch data from https://api.example.com/data
// 原始错误: Error: HTTP error! status: 404

在这个例子中，fetchData 函数在 fetch 请求失败时，抛出了一个新的错误，并将原始的 fetch 错误作为 cause 传递给新的错误。这样，在 processData 函数中，我们不仅可以知道数据处理失败了，还可以知道是因为 fetch 请求返回了 404 错误。

更高级的用法：递归追踪 Error.cause

如果错误链很长，我们可以递归地追踪 Error.cause，直到找到最原始的错误。

function getRootCause(error) {
  if (error.cause) {
    return getRootCause(error.cause);
  } else {
    return error;
  }
}

async function processData(url) {
  try {
    const data = await fetchData(url);
    // 处理数据
    console.log("数据处理成功:", data);
  } catch (error) {
    console.error("数据处理失败:", error.message);
    const rootCause = getRootCause(error);
    console.error("根源错误:", rootCause.message);
  }
}

processData("https://api.example.com/data"); // 假设这个URL不存在

通过 getRootCause 函数，我们可以找到错误链中最原始的错误，方便我们定位问题的根源。

第四部分：实战演练：一个完整的错误处理流程

现在，咱们来模拟一个更复杂的场景，展示如何将 try-catch-finally 和 Error.cause 结合起来，构建一个完整的错误处理流程。

假设我们有一个在线商店，用户可以购买商品。我们需要处理以下几种情况：

商品不存在
库存不足
支付失败

class ProductNotFoundError extends Error {
  constructor(message, options) {
    super(message, options);
    this.name = "ProductNotFoundError";
  }
}

class InsufficientStockError extends Error {
  constructor(message, options) {
    super(message, options);
    this.name = "InsufficientStockError";
  }
}

class PaymentFailedError extends Error {
  constructor(message, options) {
    super(message, options);
    this.name = "PaymentFailedError";
  }
}

async function purchaseProduct(productId, quantity, paymentInfo) {
  try {
    const product = await getProduct(productId);
    if (!product) {
      throw new ProductNotFoundError(`Product with id ${productId} not found`);
    }

    if (product.stock < quantity) {
      throw new InsufficientStockError(`Insufficient stock for product ${productId}`);
    }

    await processPayment(paymentInfo, product.price * quantity);

    product.stock -= quantity;
    await updateProduct(product);

    console.log(`Successfully purchased ${quantity} of product ${productId}`);
  } catch (error) {
    if (error instanceof ProductNotFoundError) {
      console.error("商品不存在:", error.message);
    } else if (error instanceof InsufficientStockError) {
      console.error("库存不足:", error.message);
    } else if (error instanceof PaymentFailedError) {
      console.error("支付失败:", error.message);
      console.error("原始支付错误:", error.cause);
    } else {
      console.error("购买商品时发生未知错误:", error.message);
    }
    //可以选择重新抛出错误，交给更上层的错误处理
    //throw error;
  } finally {
    // 记录日志，清理资源等
    console.log("购买流程结束");
  }
}

async function getProduct(productId) {
  // 模拟从数据库获取商品信息
  console.log("获取商品信息:", productId);
  return { id: productId, name: "Example Product", price: 10, stock: 5 };
  //return null; // 模拟商品不存在的情况
}

async function processPayment(paymentInfo, amount) {
  // 模拟处理支付
  console.log("处理支付:", paymentInfo, amount);
  // 模拟支付失败的情况
  throw new PaymentFailedError("Payment failed", { cause: new Error("Invalid credit card number") });
  //return Promise.resolve(); // 模拟支付成功
}

async function updateProduct(product) {
  // 模拟更新商品信息到数据库
  console.log("更新商品信息:", product);
  return Promise.resolve();
}

// 模拟调用购买商品
purchaseProduct(123, 2, { cardNumber: "1234-5678-9012-3456" });

// 输出结果（示例）：
// 获取商品信息: 123
// 处理支付: { cardNumber: '1234-5678-9012-3456' } 20
// 支付失败: Payment failed
// 原始支付错误: Error: Invalid credit card number
// 购买流程结束

在这个例子中，我们定义了几个自定义的错误类，分别表示商品不存在、库存不足和支付失败。在 purchaseProduct 函数中，我们使用 try-catch-finally 结构来处理可能发生的错误。我们还使用了 Error.cause 来记录支付失败的原始错误，方便我们诊断支付问题。

第五部分：总结与最佳实践

try-catch-finally 和 Error.cause 是 JavaScript 中强大的错误处理工具。通过合理地使用它们，我们可以构建健壮、可维护的应用。

以下是一些最佳实践：

不要滥用 try-catch。只在必要的地方使用 try-catch，避免过度捕获错误。
正确处理错误。捕获错误后，要进行适当的处理，例如记录日志、通知用户、重试操作等。
使用自定义错误类。自定义错误类可以让你更清晰地表达错误的含义，方便你进行错误分类和处理。
利用 Error.cause 追踪错误链。 Error.cause 可以帮助你找到错误的根源，提高问题诊断效率。
在 finally 块中释放资源。确保在 finally 块中释放资源，避免资源泄漏。
避免在finally中return。 finally 中的return 会覆盖try或者catch中的return。

最后，送给大家一句话：

错误是程序员的朋友，只有通过不断地处理错误，我们才能不断地成长！

今天的分享就到这里，感谢各位的观看！希望大家能从今天的分享中有所收获，并在实际开发中灵活运用 try-catch-finally 和 Error.cause，写出更健壮的 JavaScript 代码！

下次再见！

发表回复 取消回复

发表回复取消回复