Make an http request inside error handling Angular 7 RXJS

Question

Hi catched the error internal server error already and logged em. But I dont know how to call the next request inside this error handling. I need to revert the beginning selectElevation(elevation.id) request by calling another request method selectPhase(this.sessionState.phaseId) if the request selectElementPricelistConfigurator() fails.

goToConfiguratorAndLoadData(elevation: Elevation) {
        this.apiService.selectElevation(elevation.id).pipe(
            mergeMap( () => this.apiService.selectElementPricelistConfigurator() ),
        ).subscribe(
        (next) => {
            ...
        },
        (err: Error | HttpErrorResponse) => {
            if (err instanceof HttpErrorResponse) {
                if (err.status === 500) {
                    console.log('Error', err.status);
                    this.apiService.selectPhase(this.sessionState.phaseId);
                }
            } else {
                throwError(err);
            }
        }
    );
}

The server just stops and is not firing this http request.

Thanks for any help, didnt found any similiar problem.

Edited:

ApiServer - selectPhase Method:

selectPhase(phaseId: string): Observable<any> {
    return this.httpClient.post(this.apiUrl + '/phases/select', {
        identifier: phaseId,
    });
}

You should use this: learnrxjs.io/operators/error_handling/catch.html, also check this out: blog.angular-university.io/rxjs-error-handling — deepchudasama
– deepchudasama, Commented Aug 2, 2019 at 11:35

Llorenç Pujol Ferriol · Accepted Answer · 2019-08-02 12:02:29Z

this.apiService.selectPhase(this.sessionState.phaseId) request is not called because there is no .subscribe() on it (assuming it returns an observable). Although, this is not the good way to do it, the good way is using the operator catchError in order to modify the error and perform some custom actions.

With catchError, you don't need to 'subscribe()' to the observable, catcError will flat the observable that you return on it's callback function.

Example:

goToConfiguratorAndLoadData(elevation: Elevation) {
        this.apiService.selectElevation(elevation.id).pipe(
            mergeMap( () => this.apiService.selectElementPricelistConfigurator() ),
            catchError((err: Error | HttpErrorResponse) => {
                if (err instanceof HttpErrorResponse && err.status === 500) {
                    console.log('Error', err.status);
                    return this.apiService.selectPhase(this.sessionState.phaseId);
                } else {
                   return throwError(err);
                }
            })
        ).subscribe(
        (next) => {
            ...
        }

    );
}

Hope this helps!

Julien Breem · Accepted Answer · 2019-08-02 11:32:17Z

1

Assuming that

this.apiService.selectPhase(this.sessionState.phaseId)

return a RxJS Observable, you need to subscribe to it for the request to fire.

To quote the official doc:

To invoke the Observable and see these values, we need to subscribe to it:

edited Aug 2, 2019 at 11:32

answered Aug 2, 2019 at 11:25

Julien Breem

1139 bronze badges

Collectives™ on Stack Overflow

Make an http request inside error handling Angular 7 RXJS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related