分析 JavaScript Error Handling 机制，包括 try-catch-finally 块的执行顺序，以及 Error 对象的结构和自定义错误类型。

咳咳，各位观众老爷们，掌声在哪里！今天咱们唠唠 JavaScript 里的“擦屁股纸”——错误处理机制。别误会，我不是说错误处理没用，而是说它像擦屁股纸一样，关键时刻能救你一命，让你不至于搞得一团糟。

错误，无处不在的烦恼

先想想，程序猿最怕什么？不是产品经理改需求（虽然也很可怕），而是程序崩溃！想象一下，你辛辛苦苦写了几千行代码，结果用户一点按钮，页面直接白板，console 里一堆红字，是不是血压瞬间就上来了？

所以，我们需要一套机制来优雅地处理这些错误，让我们的程序即使遇到问题，也能尽量保持稳定，并给用户一个友好的提示。这就是错误处理的意义。

try…catch…finally：错误处理三剑客

JavaScript 提供了 try...catch...finally 块来处理错误，这哥仨就像一个团队，分工明确：

try： “大胆往前走，出事儿我兜着！” 这里面放你觉得可能会出错的代码。
catch： “出事儿了别慌，我来接锅！” 如果 try 块里的代码真的出错了，就会被 catch 块捕获。你可以在这里处理错误，比如记录日志、给用户提示等等。
finally： “不管结果如何，我都要来收个尾！” 无论 try 块里的代码有没有出错，finally 块里的代码都会执行。通常用来做一些清理工作，比如关闭数据库连接、释放资源等等。

执行顺序：环环相扣，井然有序

这哥仨的执行顺序是这样的：

先执行 try 块里的代码。
如果 try 块里的代码没有出错，就跳过 catch 块，直接执行 finally 块。
如果 try 块里的代码出错了，就立即跳到 catch 块执行。
执行完 catch 块后，再执行 finally 块。
如果没有 catch 块，程序会直接崩溃。

用一个表格来总结一下：

情况	执行顺序
`try` 块没有出错	`try` -> `finally`
`try` 块出错，有 `catch` 块	`try` -> `catch` -> `finally`
`try` 块出错，没有 `catch` 块	`try` -> 崩溃

代码示例：眼见为实，胜于雄辩

try {
  console.log("Try block started");
  // 模拟一个错误
  throw new Error("Something went wrong!");
  console.log("This line will not be executed"); // 因为上面已经抛出错误了
} catch (error) {
  console.error("Catch block executed:", error.message);
} finally {
  console.log("Finally block executed");
}

// 输出：
// Try block started
// Catch block executed: Something went wrong!
// Finally block executed

再来一个例子，这次 try 块里不报错：

try {
  console.log("Try block started");
  console.log("Everything is fine!");
} catch (error) {
  console.error("Catch block executed:", error.message);
} finally {
  console.log("Finally block executed");
}

// 输出：
// Try block started
// Everything is fine!
// Finally block executed

finally 的妙用：善始善终，有始有终

finally 块最常见的用途就是做一些清理工作，确保资源得到释放。例如，在使用 XMLHttpRequest 发送请求时，可以在 finally 块中关闭连接：

function fetchData(url) {
  let xhr = new XMLHttpRequest();
  try {
    xhr.open("GET", url);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log("Data:", xhr.response);
      } else {
        throw new Error("Request failed with status: " + xhr.status);
      }
    };
    xhr.onerror = function() {
      throw new Error("Network error");
    };
    xhr.send();
  } catch (error) {
    console.error("Error fetching data:", error.message);
  } finally {
    // 无论请求成功还是失败，都要关闭连接
    xhr = null; // 释放资源
    console.log("XHR connection closed");
  }
}

fetchData("https://example.com/api/data"); // 替换成你自己的 API 地址

Error 对象：错误的身份证，信息的载体

当错误发生时，JavaScript 会创建一个 Error 对象，这个对象包含了关于错误的各种信息。 Error 对象有以下几个重要的属性：

name： 错误的名字，比如 "Error", "TypeError", "ReferenceError" 等等。
message： 错误的描述信息，通常包含错误的具体原因。
stack： 错误堆栈信息，记录了错误发生时函数调用的顺序，可以帮助你快速定位错误发生的位置。

代码示例：查看 Error 对象的属性

try {
  // 故意制造一个错误
  undefinedVariable.toString();
} catch (error) {
  console.log("Error name:", error.name);
  console.log("Error message:", error.message);
  console.log("Error stack:", error.stack);
}

// 输出（大致）：
// Error name: ReferenceError
// Error message: undefinedVariable is not defined
// Error stack: ReferenceError: undefinedVariable is not defined
//     at <anonymous>:2:1

JavaScript 内置错误类型：各司其职，各显神通

JavaScript 内置了一些常见的错误类型，它们都继承自 Error 对象：

Error： 最通用的错误类型，作为其他错误类型的基类。
EvalError： eval() 函数执行错误，现在已经很少使用了。
RangeError： 数值超出允许的范围，比如数组的长度为负数。
ReferenceError： 引用了不存在的变量或函数。
SyntaxError： 语法错误，代码不符合 JavaScript 语法规范。
TypeError： 类型错误，比如调用了不存在的方法或者将一个字符串当做函数调用。
URIError： URI 相关函数使用错误，比如 encodeURI() 或 decodeURI()。

了解这些错误类型可以帮助你更好地理解错误发生的原因，并采取相应的处理措施。

代码示例：区分不同的错误类型

try {
  // 制造一个类型错误
  null.toString();
} catch (error) {
  if (error instanceof TypeError) {
    console.log("This is a TypeError!");
  } else {
    console.log("This is another type of error:", error.name);
  }
}

// 输出：
// This is a TypeError!

try {
  // 制造一个引用错误
  console.log(nonExistentVariable);
} catch (error) {
  if (error instanceof ReferenceError) {
    console.log("This is a ReferenceError!");
  } else {
    console.log("This is another type of error:", error.name);
  }
}

// 输出：
// This is a ReferenceError!

自定义错误类型：量身定制，更加灵活

除了使用 JavaScript 内置的错误类型，你还可以自定义错误类型，以便更好地表达你的程序中可能出现的特定错误。

代码示例：自定义错误类型

// 定义一个自定义错误类型
class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = "ValidationError";
    this.field = field; // 添加一个自定义的属性，表示哪个字段验证失败
  }
}

function validateEmail(email) {
  if (!email.includes("@")) {
    throw new ValidationError("Invalid email format", "email");
  }
  return true;
}

try {
  validateEmail("invalid-email");
} catch (error) {
  if (error instanceof ValidationError) {
    console.error("Validation error:", error.message, "Field:", error.field);
  } else {
    console.error("An unexpected error occurred:", error.message);
  }
}

// 输出：
// Validation error: Invalid email format Field: email

最佳实践：让错误处理更上一层楼

不要滥用 try...catch： 只在可能出错的地方使用 try...catch，不要把整个程序都包在 try 块里。
处理错误而不是忽略它： 捕获到错误后，一定要进行处理，比如记录日志、给用户提示等等，不要直接忽略它。
使用自定义错误类型： 对于程序中可能出现的特定错误，使用自定义错误类型可以提高代码的可读性和可维护性。
尽早发现错误： 在开发阶段就应该尽可能多地发现和修复错误，避免将错误带到生产环境。可以使用工具进行静态代码分析和单元测试。
全局错误处理： 使用 window.onerror 可以捕获全局未处理的错误，防止程序崩溃。

全局错误处理：最后的防线

window.onerror 是一个全局事件处理函数，当 JavaScript 发生未被 try...catch 捕获的错误时，会触发这个函数。你可以在 window.onerror 中记录错误信息，或者给用户一个友好的提示，防止程序直接崩溃。

window.onerror = function(message, source, lineno, colno, error) {
  console.error("Global error handler:", message, source, lineno, colno, error);
  // 可以给用户一个友好的提示
  alert("An unexpected error occurred. Please try again later.");
  return true; // 阻止浏览器默认的错误处理行为
};

// 制造一个错误
console.log(undefinedVariable.toString()); // 故意抛出一个错误，没有被 try...catch 捕获

错误处理与异步编程：挑战与机遇

在异步编程中，错误处理稍微复杂一些，因为错误可能发生在异步操作的回调函数中。

Promise 的 catch： Promise 对象提供了 catch 方法来捕获异步操作中发生的错误。
async/await 的 try...catch： async/await 语法糖使得异步代码看起来更像同步代码，因此可以使用 try...catch 块来处理异步操作中发生的错误。

代码示例：Promise 的错误处理

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .catch(error => {
      console.error("Error fetching data:", error);
      // 处理错误
    });
}

fetchData("https://example.com/api/data");

代码示例：async/await 的错误处理

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    // 处理错误
  }
}

fetchData("https://example.com/api/data");

总结：防患于未然，有备无患

错误处理是编程中不可或缺的一部分。掌握 JavaScript 的错误处理机制，可以帮助你编写更健壮、更可靠的代码，提高用户体验，减少程序崩溃的风险。记住，防患于未然，有备无患！

好了，今天的讲座就到这里，希望各位观众老爷们有所收获！散会！

发表回复 取消回复

发表回复取消回复