0

I have an app in react.

I setup redux-obsrrvable and axios-observable.

I face a problem when my request is unauthorized.

Using the following code =>

const getWorkspaces = (action$, state$) => action$.pipe(
    ofType(WorkspaceActions.getWorkspacesRequest),
    switchMap(action =>
        HttpService.GetAsync<any>('get_all_workspaces').pipe(
            map(response => {
                console.log(response)
                let data = response.data ? response.data : [];
                return of(WorkspaceActions.getWorkspacesSuccess(data));
            }),
            catchError((error: string) => {
                console.log(error)
                return of(WorkspaceActions.getWorkspacesFailed({error}));
            })
        )
    )
);

The api return an error 401, but the redux effect goes inside the map and not the catchError. I believe an Error 401 is considerer an error and should go into the catchError.

Am I using something wrongly ?

EDIT :

I have already setup the following

Axios.interceptors.response.use(response => {
    console.log(`[response] --> ${response.status}`)
    return response;
}, error => {
    if(error && error.response) {
                console.log(error.response)
                console.log(`[error][code: ${error.response.status}] -->> ${error.response}`);
    }
    return error;
})

and here it does go in the error, but an when I use

class HttpService {

    // apicoreBaseUrl define apicore base url from env
    private static apicoreBaseUrl = (targetApi: string, basePath: string = "hexacloud"): string => {
        return `/${basePath}/${targetApi}`
    }

    // Get common http get function
    public static GetAsync<T>(targetApi: string, params?: any, basePath?: string): AxiosObservable<T> {
        return Axios.get(this.apicoreBaseUrl(targetApi, basePath), { params: params })
    }

    public static PostAsync<T>(targetApi: string, data: any, basePath?: string): AxiosObservable<T> {
        return Axios.post(this.apicoreBaseUrl(targetApi, basePath), data);
    }
}

the returner observable fo not go on the catch

Bobby
  • 4,372
  • 8
  • 47
  • 103
  • 1
    Read this link : https://stackoverflow.com/questions/47216452/how-to-handle-401-authentication-error-in-axios-and-reac. Hope this will help you. – Sham Gir Oct 29 '19 at 07:42
  • Thanks for your answer, I have setup that already. I do get error, but outside of the interceptor, it's still considered an non error – Bobby Oct 29 '19 at 07:46

0 Answers0