Question

我使用拦截器根据每个请求的HTTP响应在显示屏上显示错误消息。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const customReq = request.clone({
        //headers: request.headers.set('app-language', 'en')
    });
    return next
        .handle(customReq).pipe(
            tap((ev: HttpEvent<any>) => {
                if (ev instanceof HttpResponse) {
                    // processing request
                }
            }),
            catchError(response => {
                if (response instanceof HttpErrorResponse) {
                    switch (response.status) {
                        case 0:
                            // server API connection error show
                            break;
                        case 403:
                            // error Token Invalid and Redirect to logout
                            break;
                        case 401:
                            // error Token Invalid and Redirect to logout
                            break;
                        case 502:
                            // Bad gateway error
                            break;
                        case 500:
                            // internal server error
                            break;
                    }
                }
                // return next.handle(request);
                return observableThrowError(response);
            })
        );
}

在我的项目中，Web服务器有时可能无法使用一秒钟，并回复500错误代码。我不希望我的网络应用在收到错误后立即显示错误消息，并且希望它重试请求几次，但要延迟一秒钟。

我已经尝试过rxjs retry：

...
.handle(customReq).pipe(retry(5),
...

它没有用，因为它没有延迟。根据这个答案 How to create an RXjs RetryWhen with delay and limit on tries

我尝试了retryWhenlike：

.handle(customReq).pipe(
    tap((ev: HttpEvent<any>) => {
        if (ev instanceof HttpResponse) {
            console.log('###processing response', ev, this.location);
        }
    }),
    retryWhen(error => {
        return error
            .flatMap((error: any) => {
                if (error.status  == 400) {
                    return Observable.of(error.status).delay(1000);
                }
                if (error.status  == 0) {
                    return observableThrowError(error).delay(1000);
                }
                return observableThrowError(error);
            })
            .take(5)
            .concat(observableThrowError(error));
    }),

但是它不能按预期运行，并且不会进入if条件内。

Answer 1

您的代码中有几个错误：

您正在隐藏error变量-首先是错误流，然后是错误对象。
将observableThrowError与delay一起使用无效。错误将绕过除处理错误之外的所有运算符。
您正在混合使用“ pipe(operator())”样式运算符和原型样式运算符.operator()。

我已经提出了一些建议：

.handle(customReq).pipe(
    tap((ev: HttpEvent<any>) => {
        if (ev instanceof HttpResponse) {
            console.log('###processing response', ev, this.location);
        }
    }),
    retryWhen(errors => errors
        .pipe(
            concatMap((error, count) => {
                if (count < 5 && (error.status == 400 || error.status == 0)) {
                    return Observable.of(error.status);
                }

                return observableThrowError(error);
            }),
            delay(1000)
        )
    ),

主要变化是通过concatMap的第二个参数来跟踪错误计数，而不是使用take opeator，这主要用于取消订阅可观察对象，我想您想抛出一个错误。

Answer 2

以下博客文章指导您如何重试失败的HTTP请求。它还为您提供了处理重试的不同策略。

https://blog.angularindepth.com/retry-failed-http-requests-in-angular-f5959d486294?source=activity---post_recommended_rollup

Answer 3

您可以使用重试运算符，最好在拦截器上使用它

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
        .pipe(retry(RETRY_NUMBER))

它只会在请求失败时重试，然后找出错误，您可以抛出一个错误然后再捕获它

.pipe(tap(event => {
            // tipo http
            if (event instanceof HttpResponse) {
                if (event.body && event.body.error === true && event.body.errorMessage) {
                    throw new Error(event.body.errorMessage);
                }
            }
        }))


.pipe(catchError((err) => {

      if (err.status === 0) {
          //do something
      }
      // other conditions ...

      return EMPTY;
}));

不要忘记返回EMPTY，因为拦截器需要返回一个可观察的

在角度6中重试HTTP请求

3 个答案: