作为一枚Web前端螺丝工，JavaScripttry...catch是我们开发中常用的功能之一。

在本文中，我将分享 10 个try...catch的小技巧，让好兄弟们在处理异常时更加得心应手。

1.捕获所有异常

如果你想在你的代码中捕获所有可能的异常，你可以使用catch块。例如：

try {  
// ...  
} catch {  
// ...  
}

此方法将捕获所有异常，包括 “语法错误” 、 “运行时错误” 和 “自定义错误” 。但是，在生产环境中使用时，建议具体捕获异常类型，以便更好地诊断问题。

2.捕获特定类型的异常

如果只想捕获某些类型的异常，可以在catch代码块内使用条件语句。例如，下面的代码块只会捕获TypeError异常：

try { 
  // ...
 } catch (error) { 
  if (error instanceof  TypeError ) { 
     // ...
   } 
}

还可以使用switch语句来检查异常类型：

try {  
    // ...  
} catch (error) {  
        switch (error.constructor) {  
            case TypeError:  
        // ...  
        break;  
            case 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("error");  
    }  
    return a / b;  
}

如果b的值在函数divide中等于0，则抛出包含错误消息的异常。则可以使用它try...catch来捕获此异常并采取适当的措施。

6.在异常中传递附加信息

当抛出异常时，我们可以传递一些额外的信息来帮助调试问题。例如：

function divide(a, b) {  
    if (b === 0) {  
        throw new Error("error", { a, b });  
    }  
    return a / b;  
}

在这个例子中，异常对象a包含b除数为零时的值。当我们捕获此异常时，就可以访问这些值并采取相应的行动。

7.重新抛出异常

有时，在处理异常时，我们就需要重新抛出异常，以便更高级别的代码可以处理它。则可以使用throw该语句重新抛出异常。例如：

try {  
    // ...  
} catch (error) {  
    // ...  
    throw error;  
}

在这个例子中，异常被重新抛出并传递给调用函数进行处理。

8. 捕捉错误并忽略它们

有时，在调试代码时，我们可能希望暂时忽略一些错误。就可以使用空catch代码块来忽略异常。例如：

try {  
    // ...  
} catch {  
    // ...  
}

但是，不建议在生产环境中使用该方法。在生产环境中忽略异常会导致代码出现不可预测的操作，而且代码会变成S山。

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和编写更健壮的代码。

10个 try…catch JS中的小技巧