使用redux-saga和fetch自动处理401响应

时间:2017-01-22 18:02:36

标签: reactjs fetch react-redux redux-saga

我正在构建一个“安全”的应用程序,并使用redux-saga和fetchjs来执行对后端的异步调用。

当用户未获得授权时,我的后端会返回401状态代码,我希望全局捕获此“异常”并发送操作,以便我的反应应用程序进入登录屏幕。

我找到了以下解决方案:https://github.com/redux-saga/redux-saga/issues/110,但在这种情况下,401的处理应该在我们构建的每个传奇中都是明确的。

通过向每个传奇添加代码,它变得更加复杂。它还增加了开发人员忘记添加处理401代码的代码的机会。

有一种很好的方法来全局处理这个401响应吗?

1 个答案:

答案 0 :(得分:5)

我不会使用hax = axes(); rose(hax, theta, 10) % Set only the y limits hax.YLim = [0 hax.YLim(2)]; ,因为它没有能力做你需要的。

相反,当设置商店,API层和其他东西时,配置API层会在每次发生错误时调用处理程序。

报告的API层示例调用错误处理程序。

redux-saga

配置应用程序。

const conf = {
    onError: () => {},
}

api.onError = (cb) => {
    conf.onError = cb;
}

api.get = (url) => {
    fetch(url)
        .then(response => {
            if (response.ok === false) {
                return conf.onError(response);
            }
            return response;
        })
        // Network error
        .catch(conf.onError)
}

然后,通常调用API,如果发生错误,则会调度操作进行存储,您可能会也可能不会对此操作做出反应。