请求失败后可观察到的 catchError (axios/redux)

Question

简介：

我在 reactjs 中有一个应用程序，使用 redux，redux-observable 和 axios-observable。

我遇到 HTTP 错误处理问题。

让我们看看下面的史诗：

const loginRequest = (action$, state$) => action$.pipe(
    ofType(UsersActions.loginRequest),
    switchMap((action: {payload:{email: string, password: string}}) => 
        HttpService.PostAsync<any>('token-auth', action.payload).pipe(
            map(response => {
                  // blabla
            }),
            catchError((error: string) => {
                // blabla
            })
        )
    )
);

HttpService 看起来像这样

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

所以这工作正常，如果 post 请求失败，我进入 catchError，如果没有，我进入正常 map.

问题：

我想拦截响应，为了添加全局应用程序错误处理，我设置了以下函数：

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

我现在可以根据 HTTP 请求结果查看日志、错误或响应。但是，我将永远进入 map，永远不会进入我的 Epic 的 catchError。

问题：

我怎样才能发现错误，但仍然向 redux-observable 史诗抛出错误？

Answer 1

throwError 仅在 RX 链中有效，尝试使用原生 JS throw

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

请求失败后可观察到的 catchError (axios/redux)

observable catchError after request failure (axios/redux)

rxjs

reactjs

redux

axios

redux-observable