JavaScript 如何处理”未捕获的异常”，以便在用户界面上显示错误信息

在本文中，我们将讨论JavaScript中的未捕获异常，以及如何处理这些异常，以便在出现异常时显示错误消息。

理解JavaScript中的”未捕获异常”： 异常是由于各种原因而发生的异常情况，例如API调用失败，或者无法使用JSON.parse()方法将字符串解析为JSON对象等。为了处理这些异常，我们通常会将我们认为可能会抛出异常的代码（如果代码运行不如预期则可能会抛出异常）包裹在try/catch块中。代码在try块中运行，一旦发生异常，就会在catch块中进行处理。

现在，未捕获异常是异常家族中的特殊情况，它们不会在catch块中被捕获，而是由浏览器拦截并处理这些异常。

让我们看看如何处理这些未捕获异常并在用户界面上显示适当的错误消息。

处理未捕获异常：

方法1： 使用 unhandledrejection 事件监听器。当元素中存在未处理的拒绝时， unhandledrejection 会触发。
示例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
</head> 
  
<body> 
    <h2>Handling unhandler rejections in javascript</h2> 
</body> 
<script> 
    window.onunhandledrejection = event => { 
  
        // Logs the error in the console 
        console.log(`UNHANDLED PROMISE REJECTION: ${event.reason}`); 
    }; 
  
    new Promise((resolve, reject) => { 
        reject('Rejected!') 
    }) 
</script> 
  
</html>

输出：

UNHANDLED PROMISE REJECTION: Rejected!

示例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
</head> 
  
<body> 
    <h2>Handling unhandler rejections in javascript</h2> 
</body> 
  
<script> 
    window.addEventListener('unhandledrejection', event => { 
  
        // Logs the error in the console 
        console.log(`UNHANDLED PROMISE REJECTION: ${event.reason}`);  
    }); 
  
    // Code to generate an uncaught exception error 
    new Promise((resolve, reject) => { 
        reject('Rejected!') 
    }) 
</script> 
  
</html>

输出：

UNHANDLED PROMISE REJECTION: Rejected!

方法2： 使用错误事件监听器。当在事件监听器所添加的元素内部发生错误时，错误事件就会被触发。

示例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
</head> 
  
<body> 
    <h2>Handling unhandler rejections in javascript</h2> 
</body> 
  
<script> 
    window.onerror = (error) => { 
  
        // Logs error on the console 
        console.log(`UNHANDLED ERROR: ${error}`);  
    }; 
  
    // Throws the uncaught exception error 
    throw "Deliberate Error!";  
</script> 
  
</html>

输出：

UNHANDLED PROMISE REJECTION: Uncaught Deliberate Error!

示例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
</head> 
  
<body> 
    <h2>Handling unhandler rejections in javascript</h2> 
</body> 
  
<script> 
    window.addEventListener('error', error => ({ 
  
        // Logs error on the console 
        console.log(`UNHANDLED ERROR:`, error);  
    }); 
  
    // Throws the uncaught exception error 
    throw "Deliberate Error!";  
</script> 
  
</html>

输出：

JavaScript 如何处理"未捕获的异常"，以便在用户界面上显示错误信息