Как задержать http ответы на ошибки в Angular 7 - PullRequest
Новая
       29

Как задержать http ответы на ошибки в Angular 7

1 голос
/ 22 апреля 2019

Я работаю над проектом Angular7 и у меня есть некоторые проблемы с обработкой ошибок в http-запросах.

Вот мой компонент входа в систему с двумя функциями 

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

    }

}

Вот мой AuthService с двумя функциями. 

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

    }

}

Когда я делаю запрос к серверу, еслиСтатус ответа успешен, он ожидает 1000 мс, а затем показывает ожидаемый результат.Но если ответ возвращает ошибку, функция delay (1000) не работает и блок ошибок работает немедленно.Я пытался с и без catchError.Оба работают точно так же.

1 Ответ

1 голос
/ 22 апреля 2019

Оператор delay будет работать только с событиями, отправляемыми через наблюдаемые посредством «следующих» уведомлений (в вашем случае это «успех»).Когда возникает ошибка, она отправляется как уведомление об ошибке и пропускает сразу ваш оператор delay.Если вы хотите отложить ошибку, вы должны отловить ее, ввести задержку, а затем повторно выдать ее: 

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);
    }
  )
}
...