Question

INTRO：

我在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);
}

所以这正常工作，如果发布请求失败，我进入catchError，如果不是，我进入普通的map。

问题：

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

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

我现在可以看到日志，错误或响应，具体取决于HTTP请求结果。但是，我将始终进入史诗的map，而永远不会进入catchError。

问题：

我该如何检查错误，但仍然向redux可观察的史诗抛出错误？

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）

1 个答案: