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

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

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

Catch API and 401 errors globally in React's router

reactjs

react-router

react-router-redux