Question

我使用react + react-router + redux。我想创建一个全局的东西来处理应用程序中抛出的所有错误。是否还可以捕获API来电错误和401状态？

我在Root.jsx：

中谈到这样的事情

window.addEventListener("error", (e) => {});

它适用于我可以记录的严重错误。但是如果我想提供一些API错误呢？

例如：我想保存一些网格数据，但是服务器抛出一个错误，即10个给定行中的3个未保存（我知道这是一个常见问题，应该使用事务解决，但我在这里使用Mongo :P）。现在我想为用户显示一个简单的对话框，显示错误消息和3行未保存。如果我没有权限并且服务器抛出401状态代码怎么办？可能我想将用户重定向到索引或登录页面。

这是一个典型的例子，因为我想简化我目前正在实施的事情。

我是React的新手，所以我现在不知道解决方案，但如果我在Angular中编写了相同的内容，我会使用Angular's HTTP Interceptors来解决我的问题。我想我需要类似的东西（或者这可能是一些常见的解决方案吗？）。

[编辑]

嗯。我似乎找到了解决我问题的方法：fetch-intercept

无论如何，您知道其他解决方案吗？

Answer 1

我假设您正在使用ajax调用来访问您的API;

我会创建一个看起来像这样的简单的ajax包装器;

AjaxWrapper = function(options){
    return $.ajax($.extend({}, options, {
        error: function (jqXHR, textStatus, errorThrown){
            if(jqXHR.status === 401){
                browserHistory.push('/unauthorized_route_handler');
            }
            options.error(jqXHR, textStatus, errorThrown);
        }
    }))
}

然后你可以简单地使用这个包装来调用你的api，像往常一样传递一个options对象$.ajax。根据需要更新jqXHR === 401中的部分，或者为403＆amp;添加处理程序。 500也是。

在React的路由器

1 个答案: