reactjs - React Redux 中的 fetch 出现错误

Question

现在我有以下架构。前端有React Redux，还有Rails api。在我的应用程序(Redux)的状态中，我存储用户状态(授权或未授权)。当我通过 fetch 发出任何请求时，我总是处理相同的错误并发送相同的 header 。

例如:如果我从服务器发生未经授权的错误，我总是调度 reducer ，这会将用户的状态更改为未经授权。

在一个地方处理这些错误的最佳方法是什么？

谢谢!

Answer 1

首先为所有action-reducer维护一个存储，为用户身份验证状态创建一个action-reducer。要在一处处理错误，请在“services”文件夹中创建 axios 服务(如果您使用 axios for HTTP)。服务可以这样

import axios from 'axios';    
var AxiosService = {
        getMethod,
        postMethod,
    }

    function getMethod(url, successCallBack, errorCallBack) {

        axios.get(url, {
            header: header
        }).then((data => {
            return successCallBack(data);
        })).catch(err=>{
            //IF ERROR TYPE IS 401 UNAUTHORIZED
            //DISPATCH HERE
        })
    }

    function postMethod(url, obj,  successCallBack, errorCallBack) {

        return axios.post(url, obj, {
            header: header
        }).then((data => {
            return successCallBack(data);
        })).catch(err=>{
            //IF ERROR TYPE IS 401 UNAUTHORIZED
            //DISPATCH HERE
        })
    }

    export default AxiosService;

在任何组件中获取数据时，只需导入 AxiosService 即可

import AxiosService from '..address'
AxiosService.getMethod('my/rails/backend',data=>{},err=>{})