温馨提示:本文翻译自stackoverflow.com,查看原文请点击:reactjs - error.response.data is undefined when using axios interceptors.request

reactjs - 使用axios拦截器.request时error.response.data未定义

发布于 2020-03-27 11:40:08

我正在使用“ axios”:“ ^ 0.18.0”

我正在拦截请求和响应,并拦截请求添加令牌

当我使用请求拦截器,然后在响应拦截器中,如果出现[400,...]错误,则我的“ error.response.data ”未定义,并且我无法访问异常类型和消息来翻译它们

当我删除请求拦截器时,它可以正常工作,但是我需要请求拦截器来添加令牌

axiosAuthInstance.interceptors.request.use((config)=>{
    console.log('Auth req config=>', config.url);
    console.log('auth req ',config);

    const token = store.getState().tokenReducer.access_token;
    console.log(token);
    if (token != null || token !== '.') {
        config.headers.Authorization = `Bearer ${token}`;
        console.log('authed');
    }
    return config;
},(error)=>{
    ToastMaker().withoutAction('Ooops Error in Auth Request Interceptor','warning');
    console.log(error);
    return Promise.reject(error);
});
//------------------------------------------
axiosAuthInstance.interceptors.response.use((response)=>{
    console.log('Auth resp response=>',response);
    if (response.data.error) {
        console.log('hereeeeeee !!!');
        // return Promise.reject(response);
    }
    return response;
},(error)=>{
    switch(error.response.status){
        case 400:{
            console.log(error.response.data.customExceptionDetailModelList);
            error.response.data.customExceptionDetailModelList.forEach((item)=>{console.log(item.message.error)});
            ToastMaker().withoutAction(`${error.response.status}` + " "+error.response.data.error_description,'warning');
            break;
        }

        case 401:{
            console.log('shafffft');
            console.log(error.response.data.customExceptionDetailModelList);
            error.response.data.customExceptionDetailModelList.forEach((item)=>{console.log(item.message.error)});
            ToastMaker().withoutAction(`${error.response.status}` +" "+error.response.data.error_description,'warning');
            break;
        }

        case 404:{
            console.log(error.response.data.customExceptionDetailModelList);
            error.response.data.customExceptionDetailModelList.forEach((item)=>{console.log(item.message.error)});
            ToastMaker().withoutAction(`${error.response.status}` + " "+error.response.data.error_description,'warning');
            break;
        }

        case 500:{
            ToastMaker().withoutAction(`${error.response.status}` +" "+error.response.data.error_description,'warning');
            break;
        }

        default:{
            ToastMaker().withoutAction('مشکل ارتباط با سرور','warning');
            break;
        }
    }
    console.log(error.response);
    return Promise.reject(error);
});

这是没有request.intercept的工作方式

http://s8.picofile.com/file/8365319268/data_is_correct.PNG

这是使用请求拦截器后的样子

http://s8.picofile.com/file/8365319342/undefined_data.PNG

查看更多

查看更多

提问者
Gray
被浏览
113
Gray 2019-07-03 23:01

问题是在标题中添加“ Bearer null”。

const token = store.getState().tokenReducer.access_token;
if (token != null) {
    config.headers.Authorization = `Bearer ${token}`;
}
return config;

删除if语句解决了问题。错误的标题给我错误的错误代码

发布
问题

分享
好友

手机
浏览

扫码手机浏览