Angular HttpClient with Promise (firstValueFrom) error handled twice

Question

I use interceptor like this

export class ServerErrorInterceptor implements HttpInterceptor {
    constructor(
        private appMessageService: AppMessageService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(request).pipe(
            catchError((error: HttpErrorResponse) => {
                this.appMessageService.handleError(error, 'Server request error');
                
                return of();
            })
        );
    }
}

And use HttpClient with firstValueFrom

    async create(request: any): Promise<void> {
        const response = this.http.post(this.url, request);
        await firstValueFrom(response);
    }

I expect that of() returns an empty result, so awaiting "create" method should not throw an error. But after "catchError" show an error message, another error throws "sequence contains no elements". How to build a handler pipe to not throw a second error?

First thought for me, I wouldn't personally go this route and move backwards to promises, especially in an interceptor. But have you looked at the rxjs documentation? blog.angular-university.io/rxjs-error-handling Especially with how pipe and firstValueFrom would work? rxjs.dev/api/index/function/firstValueFrom — Austin T French
– Austin T French, Commented May 4, 2023 at 15:23

BizzyBob · Accepted Answer · 2023-05-04 15:27:17Z

1

firstValueFrom requires the source observable to emit at least one value or it will throw the error you are encountering.

If the observable stream completes before any values were emitted, the returned promise will reject with EmptyError or will resolve with the default value if a default was specified.

Instead of of(), you can simply emit undefined:

of(undefined)

edited May 4, 2023 at 15:27

answered May 4, 2023 at 15:21

BizzyBob

14.9k4 gold badges32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular HttpClient with Promise (firstValueFrom) error handled twice

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related