乐趣区

关于前端:JavaScript-中-trycatch-的-10-个使用技巧

jiezi

作为一位 Web 前端工程师，JavaScript 中的 try...catch 是咱们罕用的个性之一。

try...catch 能够 捕捉代码中的异样并避免应用程序解体。然而try...catch 不仅仅是简略地捕捉异样。本文我将分享 10 个有用的 try...catch 应用技巧，让你在解决异样时更加得心应手。

1. 捕捉所有异样

如果你想捕捉代码中所有可能的异样，能够应用一个不带参数的 catch 代码块。例如：

try {// 可能会抛出异样的代码} catch {// 解决所有异样的代码}

这种形式会捕捉所有异样，包含 语法错误 、 运行时谬误 和自定义谬误。然而，在生产环境中应用时，倡议具体指定要捕捉的异样类型，以便更好地诊断问题。

2. 捕捉特定类型的异样

如果你只想捕捉特定类型的异样，能够在 catch 代码块中应用条件语句。例如，以下代码块只会捕捉 TypeError 异样：

try {// 可能会抛出 TypeError 异样的代码} catch (error) {if (error instanceof TypeError) {// 解决 TypeError 异样的代码}
}

你也能够应用 switch 语句来查看异样类型：

try {// 可能会抛出异样的代码} catch (error) {switch (error.constructor) {
    case TypeError:
      // 解决 TypeError 异样的代码
      break;
    case RangeError:
      // 解决 RangeError 异样的代码
      break;
    // ...
  }
}

3. 捕捉异步异样

如果你应用了异步代码，你可能须要捕捉异步代码中的异样。例如，以下代码块应用 Promise 来异步加载资源：

try {const resource = await fetch("/resource");
  // 解决资源的代码
} catch (error) {// 解决异样的代码}

如果在异步操作中产生异样，它会被传递到 catch 代码块中。然而，如果你没有应用 try...catch 来捕捉异样，它将被视为未解决的异样。

4. 在 finally 代码块中清理资源

如果你应用了一些须要手动清理的资源（例如文件句柄或网络连接），能够在 finally 代码块中进行清理操作。无论 try 代码块中是否产生异样，finally 代码块中的代码都会执行。例如：

let resource;
try {resource = acquireResource();
  // 解决资源的代码
} catch (error) {// 解决异样的代码} finally {releaseResource(resource);
}

5. 抛出异样

try...catch 不仅能够捕捉异样，还能够抛出异样。你能够应用 throw 语句在代码中手动抛出异样。例如：

function divide(a, b) {if (b === 0) {throw new Error("除数不能为零");
  }
  return a / b;
}

如果在 divide 函数中 b 的值为 0，则会抛出一个蕴含谬误音讯的异样。你能够应用 try...catch 来捕捉这个异样并执行相应的操作。

6. 在异样中传递额定信息

在抛出异样时，你能够传递一些额定的信息来帮忙调试问题。例如：

function divide(a, b) {if (b === 0) {throw new Error("除数不能为零", { a, b});
  }
  return a / b;
}

在这个例子中，异样对象蕴含了除数为零时的 a 和 b 的值。当你捕捉这个异样时，你能够拜访这些值并进行相应的操作。

7. 将异样从新抛出

有时，在解决异样时，你须要将异样从新抛出以便于更高层次的代码进行解决。你能够应用 throw 语句来从新抛出异样。例如：

try {// 可能会抛出异样的代码} catch (error) {
  // 解决异样的代码
  throw error;
}

在这个例子中，异样会被从新抛出并传递到调用函数中进行解决。

8. 捕捉谬误并疏忽它们

有时，在调试代码时，你可能心愿临时疏忽一些谬误。你能够应用空的 catch 代码块来疏忽异样。例如：

try {// 可能会抛出异样的代码} catch {// 疏忽异样}

然而，倡议不要在生产环境中应用这种形式。在生产环境中疏忽异样可能会导致代码无奈意料的行为。

9. 应用 Promise.catch 办法

如果你应用 Promise 来解决异步代码，你能够应用 Promise.catch 办法来捕捉异样。例如：

fetch("/resource")
  .then((response) => response.json())
  .then((data) => {// 解决数据的代码})
  .catch((error) => {// 解决异样的代码});

在这个例子中，如果 fetch 或 json 办法返回异样，它们会被传递到 catch 办法中进行解决。

10. 应用 window.onerror

最初一个技巧是应用 window.onerror 来全局捕捉异样。当页面中产生未解决的异样时，window.onerror 会被调用。你能够在 window.onerror 中记录异样信息，以便于在生产环境中诊断问题。例如：

window.onerror = function handleError(message, source, lineno, colno, error) {// 记录异样信息};

在这个例子中，当页面中产生异样时，handleError 函数会被调用，并将异样信息作为参数传递进来。你能够在这个函数中记录异样信息并将其发送到服务器以便于剖析。

论断

在 JavaScript 中，try...catch 是一个弱小的异样解决工具。它能够帮忙你诊断和调试代码中的问题，并确保你的代码在运行时可能解决异常情况。通过把握这 10 个应用技巧，你能够更好地应用 try...catch 并编写出更强壮的代码。

退出移动版