我正在使用 vue-resource
从服务器获取数据。用户需要拥有 JWT token 才能获取正确的数据。如果 token 无效或过期,则返回 401 状态。如果用户尝试访问禁止访问的页面,则会返回 403。
我想捕获这些错误并适本地(全局)处理它们。这意味着,调用应该完全由拦截器处理(如果是 401、403)。
如何防止浏览器消息“Uncaught (in promise)”并创建一些全局错误处理?我不想在每次调用时都有本地错误处理程序。
我有以下拦截器:
Vue.http.interceptors.push(function (request, next) {
request.headers.set('Authorization', Auth.getAuthHeader());
next(function (response) {
if (response.status === 401 || response.status === 403) {
console.log('You are not logged in or do not have the rights to access this site.');
}
});
});
然后在 Vue 方法
中调用以下内容:
methods: {
user: function () {
this.$http.get('http://localhost:8080/auth/user').then(function (response) {
console.log(response);
});
}
}
最佳答案
这有点进退两难,不是吗。您不希望未处理的 promise 拒绝被吞没,因为这意味着您的应用程序可能无法运行并且您不知道原因,并且永远不会收到错误发生的报告。
另一方面,为应用程序中的每个 .catch()
语句使用完全相同的错误处理机制是愚蠢的,因此实现全局错误处理程序绝对是正确的方法。
问题是在大多数情况下,您将必须从您的全局错误处理程序中重新抛出错误,否则您的应用程序会认为请求已通过并继续处理数据,这些数据将不存在。
但这会导致出现 Uncaught (in promise)
错误的情况,因为浏览器会认为你没有处理错误,而实际上你做了,在你的全局错误中处理程序。
为了解决这个问题,现在有 onunhandledrejection
事件,您可以使用它来防止浏览器记录这些错误,但是您必须确保自己处理它们。
所以我们经常做的是拥有自己的错误类,当抛出响应错误时,我们根据 HTTP 状态代码将错误转换为我们的错误类之一。
我们还为该错误附加了一个属性,例如 ignoreUnhandledRejection
并将其设置为 true
。然后,您可以使用全局处理程序来过滤掉那些错误并忽略它们,因为您知道您已经在全局处理了它们:
/**
* Prevent logging already processed unhandled rejection in console
*/
window.addEventListener('unhandledrejection', event => {
if (event.reason && event.reason.ignoreUnhandledRejection) {
event.preventDefault();
}
});
关于javascript - vue-resource: 拦截ajax错误时捕获 "Uncaught (in promise)",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43243194/