在 React 的路由器中全局捕获 API 和 401 错误答案

【问题标题】：Catch API and 401 errors globally in React's router在 React 的路由器中全局捕获 API 和 401 错误
【发布时间】：2016-05-31 08:46:22
【问题描述】：

我使用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

不管怎样，你知道其他解决方案吗？

【问题讨论】：

标签： reactjs react-router react-router-redux

【解决方案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，像往常一样将选项对象传递给$.ajax。根据需要更新 jqXHR === 401 中的部分，或添加 403 和 500 的处理程序。

【讨论】：