如何在 Angular 7 中延迟对错误的 http 响应

Question

我正在做一个 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 毫秒，然后按预期显示结果。但是如果 response returns 一个错误，delay(1000) 函数不工作并且错误块立即工作。我尝试使用和不使用 catchError。两者的工作原理完全相同。

Answer 1

delay 运算符将仅处理通过 "next" 通知通过可观察对象发送的事件（在您的情况下，这是 "success"）。发生错误时，它会作为 "error" 通知发送，并直接跳过您的 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);
    }
  )
}

如何在 Angular 7 中延迟对错误的 http 响应

How to delay http responses on errors in Angular 7

rxjs6

angular7