reactjs - axios错误处理err.response对象

Question

我有一个 React/Redux 操作创建器，它在创建新用户帐户时发出发布请求。

当我测试服务器验证时，我期望定义 catch 中的 err.response 对象并返回验证错误消息。但是，err.response 和 err.request 对象未定义，当用户应该看到验证错误时，我收到通用的“发生内部错误” .

我已遵循他们在https://github.com/axios/axios#handling-errors推荐的设置，但是我没有找到运气。有什么想法吗？

import { REGISTER_SUCCESS, REGISTER_FAILED, RegisterReq, TokenRes } from "./types";
import { returnErrors } from "../errors/actions";
import { Config } from "../../utils/tokenConfig";
import axios, { AxiosResponse, AxiosError } from "axios";

export const registerUser = (user: RegisterReq) => (dispatch:Function):void => {
    const config: Config = {
        headers: {
            "Content-Type": "application/json"
        },
        withCredentials: false
    };

    axios.post<TokenRes>("/v1/users", user, config)
        .then((res: AxiosResponse<TokenRes>):void => dispatch({
            type: REGISTER_SUCCESS,
            payload: res.data
        }))
        .catch((err: AxiosError):void => {
            if(err.response) dispatch(returnErrors(err.response.data, err.response.status, REGISTER_FAILED));
            
            else if(err.request) dispatch(returnErrors(err.request.data, err.request.status, REGISTER_FAILED));
         
            dispatch(returnErrors("An internal error occurred", 500, REGISTER_FAILED));
        });
};

Answer 1

所以看来 err 属性实际上已定义，但我的组件正在渲染多次，这使得它返回一般错误。这使得 AxiosError 属性看起来像是未定义的。

在 catch 回调中，只需将 else 添加到最终调度

.catch((err: AxiosError):void => {
    if(err.response) dispatch(returnErrors(err.response.data, err.response.status, REGISTER_FAILED));
            
    else if(err.request) dispatch(returnErrors(err.request.data, err.request.status, REGISTER_FAILED));
         
    else dispatch(returnErrors("An internal error occurred", 500, REGISTER_FAILED));
});