创建全局 Promise 拒绝处理程序

2020-11-04 08:00:00 · 飞浪

介绍在JavaScript程序中建模异步任务时，Promises改变了游戏规则。它们可以让你重构陷入“回调地狱”的大量代码，这个术语被用来描述依赖回调来建模异步操作的代码库。回调允许大

介绍

在 JavaScript 程序中建模异步任务时，Promises 改变了游戏规则。它们可以让你重构陷入“回调地狱”的大量代码，这个术语被用来描述依赖回调来建模异步操作的代码库。回调允许大量嵌套代码，而且在处理错误方面也不是那么好。回调的错误处理惯例是，你要确保回调函数中的第一个参数包含一个潜在错误。然后，你必须检查该参数是否存在，以确保你正确处理了它。Promises 以此为基础，使用 catch 方法来处理错误。catch方法确保任何上游错误都得到处理。

本指南将演示如何更进一步，添加一个全局的承诺拒绝处理程序，以便您可以在程序中捕获运行时被拒绝的承诺的每个实例。

让我们开始吧。

'onunhandledrejection' 事件处理器

大约在 2016 年，浏览器为开发人员提供了一个新的全局可用属性，可以为其分配事件处理程序。每次未处理 Promise 拒绝时，都会发生onunhandledrejection事件。在下面的代码中，您可以看到未处理的拒绝 Promise 的示例。

      const myPromise = new Promise((resolve, reject) => {
    reject('Ouch');
});

myPromise.then(() => {
    console.log('Hello world');
});

// An Unhandled Promise Rejection Error will occur ^^
    

上面的简单代码示例创建了一个始终会被拒绝的 Promise。当尝试解决该 Promise 时，将发生错误，因为没有使用catch方法来处理任何潜在错误。这导致未捕获的错误在应用程序中冒泡！

onunhandledrejection事件处理程序来帮忙！使用onunhandledrejection事件处理程序，您可以提供一个全局故障保护，它将捕获所有未处理的被拒绝的承诺。

下面的代码已经更新，以提供我们的全局承诺拒绝处理程序。

      // This function handles any unhandled promise rejections
const globalPromiseRejectionHandler = (event) => {
    console.log('Unhandled promise rejection reason: ', event.reason);
}

// Here we assign our handler to the corresponding global, window property
window.onunhandledrejection = globalPromiseRejectionHandler;

const myPromise = new Promise((resolve, reject) => {
    reject('Ouch');
});

myPromise.then(() => {
    console.log('Hello world');
});
    

瞧！不再有未捕获的错误。当您直接使用上面的代码时，您应该会在控制台中看到一条消息，内容为“未处理的承诺拒绝原因：哎哟”。只需创建一个函数事件处理程序并将其分配给全局可用窗口对象上的onunhandledrejection属性，您就创建了一种安全的方法来捕获应用程序中任何未处理的承诺拒绝。这种技术对于日志记录目的非常有用，但也允许您在未使用catch方法时随时进行安全回退。

注意：如果可能，请尝试始终使用catch方法来在接近发生承诺拒绝的位置进行处理。

结论

无论是在建模异步操作方面还是在处理错误方面，Promises 对 JavaScript 生态系统都是一个巨大的改进。

通过使用全局可用的onunhandledrejection属性，您可以轻松创建一个事件处理程序，该处理程序将在运行时捕获任何错误。这可以防止您的应用中在运行时发生许多未定义的行为。这对用户来说总是一件好事！

有关onunhandledrejection属性的更多信息，请查看文档。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

创建全局 Promise 拒绝处理程序

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const myPromise = new Promise((resolve, reject) => { reject('Ouch'); }); myPromise.then(() => { console.log('Hello world'); }); // An Unhandled Promise Rejection Error will occur ^^

// This function handles any unhandled promise rejections const globalPromiseRejectionHandler = (event) => { console.log('Unhandled promise rejection reason: ', event.reason); } // Here we assign our handler to the corresponding global, window property window.onunhandledrejection = globalPromiseRejectionHandler; const myPromise = new Promise((resolve, reject) => { reject('Ouch'); }); myPromise.then(() => { console.log('Hello world'); });