极客笔记如何在JavaScript中创建一个全局Promise拒绝处理程序
Promise拒绝处理程序是JavaScript中处理异步代码中出现的错误的强大工具。在本文中，我们将学习如何在JavaScript中构建一个全局Promise拒绝处理程序以及它如何帮助您的应用程序管理错误。您可以使用全局的unhandledrejection事件来检测未处理的Promise拒绝，并采取必要的措施，如将问题记录到错误跟踪服务或向用户显示通知。
使用异步等待的错误处理提供了一个更易理解和更简单的语法来处理Promise拒绝，但它要求您在每个异步函数中使用try-catch块进行封装。结合全局Promise拒绝处理程序，异步等待可以为您的应用程序提供一个强大和可靠的错误处理系统。
什么是Promise拒绝
在JavaScript中，Promise是处理异步代码的一种方式，例如从服务器获取数据或等待用户输入。Promise是一个表示尚未可用的值的对象。Promise有三种状态：
等待中 - 初始状态，既未实现也未拒绝。
已实现 - 表示操作成功完成。
已拒绝 - 表示操作失败。
当Promise被拒绝时，如果已附加到Promise的拒绝处理程序，则会触发拒绝处理程序。这使您可以处理错误并采取适当的措施。然而，如果没有附加到Promise的拒绝处理程序，错误将不会被注意到，这可能导致应用程序中的错误。
创建一个全局Promise拒绝处理程序
JavaScript提供了一个全局的unhandledrejection事件，用于捕获未处理的Promise拒绝。当Promise被拒绝且没有附加到Promise的拒绝处理程序时，将触发unhandledrejection事件。
示例
<html>
<body>
<div id="error-message"></div>
<script>
window.addEventListener("unhandledrejection", event => {
document.getElementById("error-message").innerHTML = event.reason;
});
// Create a new promise that intentionally rejects
const myPromise = new Promise((resolve, reject) => {
reject(new Error("Intentional error"));
});
// Use the promise
myPromise.catch(error => {
document.getElementById("error-message").innerHTML = error.message;
});
// Function to reject the promise when the button is clicked
function rejectPromise() {
myPromise.catch(() => {});
}
</script>
</body>
</html>
这段代码将事件监听器附加到全局未处理的拒绝事件上，当一个Promise被拒绝且没有拒绝处理器附加到该Promise上时，该事件将被触发。传递给事件监听器的事件对象包含一个reason属性，该属性保存了拒绝的原因。
同样地，可以使用这个事件来更集中地处理被拒绝的Promise。例如，您可以使用它向用户显示一条消息，将问题记录到错误跟踪服务中，或者进行其他必要的操作。当处理大型应用程序时，如果很难跟踪所有的Promise和相关的拒绝处理器时，这将非常有帮助。
window.addEventListener("unhandledrejection", event => {
logErrorToService(event.reason);
displayErrorMessage(event.reason);
});
示例
我们可以将上述片段按以下方式应用于我们的代码中：
<html>
<body>
<div id="error-log"></div>
<div id="error-message"></div>
<script>
window.addEventListener("unhandledrejection", event => {
logErrorToService(event.reason);
displayErrorMessage(event.reason);
});
function logErrorToService(error) {
// Code to log error to a service
var errorLog = document.getElementById("error-log");
errorLog.innerHTML = error;
}
function displayErrorMessage(error) {
// Code to display error message on screen
var errorMessage = document.getElementById("error-message");
errorMessage.innerHTML = error;
}
// Create a new promise that intentionally rejects
const myPromise = new Promise((resolve, reject) => {
reject(new Error("Intentional error"));
});
// Use the promise and handle the rejection
myPromise.catch(error => {
displayErrorMessage(error.message);
});
</script>
</body>
</html>
在这个示例中，未处理的rejection事件被捕获，并且错误被发送到两个不同的函数：一个将错误报告给错误跟踪服务，另一个向用户显示错误消息。
在实施此功能时，您应该小心，并注意不要干扰已经在应用程序中使用的其他错误处理技术，因为这个全局事件监听器将捕获页面上的所有未处理的promise rejection。
使用Async-Await进行错误处理
Async-await是一种更易读和更清晰的用于处理promises的语法。当使用async-await时，可以使用标准的try-catch块处理错误。
async function fetchData() {
try {
const response = await
fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
示例
我们可以将上面的片段用作我们代码中的如下所示 −
<html>
<body>
<script>
async function fetchData() {
try {
const response = await
fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
var dataDisplay = document.getElementById("data-display");
dataDisplay.innerHTML = JSON.stringify(data);
} catch (error) {
var errorDisplay = document.getElementById("error-display");
errorDisplay.innerHTML = error;
}
}
</script>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-display"></div>
<div id="error-display"></div>
</body>
</html>
使用await关键字，在这个示例中，异步函数fetchData等待由fetch方法返回的promise解析。catch块会捕获在try块中发生的任何错误并将其记录到控制台。
尽管更易于访问和理解，但这种错误处理方式需要将每个异步函数都放在try-catch块中。在处理具有大量异步代码的大型系统时，这可能会变得繁琐和容易出错。
然而，将async-await与全局promise拒绝处理程序结合使用可以提供强大且健壮的错误处理机制。通过使用全局promise拒绝处理程序来捕获未处理的promise拒绝，即使您忘记将异步函数包装在try-catch块中，也可以确保处理应用程序中的所有错误。
请记住，有效的错误处理对于提供更好的用户体验和迅速修复故障至关重要。一个有价值的工具，可以帮助您完成这项工作，即全局promise拒绝处理程序，但它应该谨慎使用，并与其他错误处理系统结合使用。