How to delay http responses on errors in Angular 7

Question

I am working on an Angular7 project and have some issues about error handling on http requests.

Here is my Login Component with two functions

export class LoginComponent implements OnInit, OnDestroy {

    emailLogin1() {

        this.authService.emailLogin1(this.loginForm.value).pipe(delay(1000)).subscribe(
            (response) => {
                console.log(response);
            },
            (error) => {
                console.log(error);
            }
        );

    }

    emailLogin2() {

        this.authService.emailLogin2(this.loginForm.value).pipe(delay(1000)).subscribe(
            (response) => {
                console.log(response);
            },
            (error) => {
                console.log(error);
            }
        );

    }

}

Here is my AuthService with two functions.

export class AuthService {

    constructor(private http: HttpClient) {
    }

    emailLogin1(values): any {

        return this.http.post(environment.server + '/auth/emailLogin', values).pipe(
            tap(
                (response) => {
                    localStorage.setItem('token', response['token']);
                },
                (error) => {
                    console.log(error);
                }
            )
        );

    }

    emailLogin2(values): any {

        return this.http.post(environment.server + '/auth/emailLogin', values).pipe(
            tap(
                (response) => {
                    localStorage.setItem('token', response['token']);
                }
            ),
            catchError((error) => {
                console.log(error);
                throw error;
            })
        );

    }

}

When I make a request to the server, if response status is successful, it waits for 1000 ms and then shows the result as expected. But if response returns an error, delay(1000) function not working and error block working immediately. I tried with and without catchError. Both working exactly the same.

seniorquico · Accepted Answer · 2019-04-22 05:37:23Z

2

The delay operator will only work on events sent through the observable via "next" notifications (in your case, this is a "success"). When an error occurs, it is sent as an "error" notification, and it skips right past your delay operator. If you want to delay the error, you should catch it, introduce a delay, and then re-throw it:

emailLogin1() {
  this.authService.emailLogin1(this.loginForm.value).pipe(
    delay(1000), // only affects "success"
    catchError(error => interval(1000).pipe( // only affects "error"
      mergeMap(() => throwError(error)) // re-throw error after our delay
    )),
  ).subscribe(
    (response) => {
      console.log(response);
    },
    (error) => {
      console.log(error);
    }
  )
}

answered Apr 22, 2019 at 5:37

seniorquico

1,4691 gold badge13 silver badges23 bronze badges

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

1 Comment

Softcore Over a year ago

I remember that there was an easier solution but your method works too. I'll use it. Thanks for your help!..

Collectives™ on Stack Overflow

How to delay http responses on errors in Angular 7

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related