Angular 7 - 如何在某些响应状态代码上重试 http 请求？

Question

我正在尝试从 Angular 拦截器捕获 http 请求的错误，并在重试 503 和 504 响应n时间时将401 处理为注销。

这是我的 http 拦截器：

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

    return next.handle(req).pipe(
      catchError(error => {
        if (error.status === 401) {
          this.authenticationService.logout();
          this.router.navigate(['login']);
        }

        return throwError(error);
      }),
      retryWhen(errors => errors
        .pipe(
          concatMap((error, count) => {
            if (count < 2 && (error.status == 503 || error.status == 504)) {
              return of(error.status);
            }

            return throwError(error);
          }),
          delay(500)
        )
      )
    );
  }

我 100% 确定这段代码在我编写时有效，因为我对其进行了多次测试，但现在它给了我：

UnsubscriptionErrorImpl 
{message: "1 errors occurred during unsubscription:?1) TypeError: Cannot read property 'apply' of null", name: "UnsubscriptionError", errors: Array(1)}

errors: Array(1)
   0: TypeError: Cannot read property 'apply' of null at RetryWhenSubscriber._zoneUnsubscribe (http://localhost:4200/polyfills.js:8506:44) at RetryWhenSubscriber.push../node_modules/rxjs/_esm5/internal/Subscription.js.Subscription.unsubscribe (http://localhost:4200/polyfills.js:3739:30) at RetryWhenSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.unsubscribe (http://localhost:4200/polyfills.js:3524:38) at RetryWhenSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._unsubscribeAndRecycle (http://localhost:4200/polyfills.js:3541:14) at RetryWhenSubscriber.push../node_modules/rxjs/_esm5/internal/operators/retryWhen.js.RetryWhenSubscriber.notifyNext (http://localhost:4200/vendor.js:155632:14) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (http://localhost:4200/polyfills.js:2717:21) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:4200/polyfills.js:3504:18) at InnerSubscriber.rxjs.Subscriber.next (http://localhost:4200/polyfills.js:8537:29) at Notification.push../node_modules/rxjs/_esm5/internal/Notification.js.Notification.observe (http://localhost:4200/polyfills.js:2769:50) at AsyncAction.push../node_modules/rxjs/_esm5/internal/operators/delay.js.DelaySubscriber.dispatch (http://localhost:4200/vendor.js:153337:40)
length: 1
__proto__: Array(0)
message: "1 errors occurred during unsubscription:?1) TypeError: Cannot read property 'apply' of null"
name: "UnsubscriptionError"

上次它工作时，我使用的是 angular 6。现在我使用的是 angular 7。我已经尝试了不同的 rxjs 版本，但无济于事。

如何解决此问题并实现简单的重试逻辑？

编辑：

我只是注意到，如果我import 'zone.js/dist/zone-patch-rxjs';从poliyfills.ts文件中删除它，那么它可以工作，但其他事情会停止工作。

Answer 1

您需要关闭流以401避免进一步的逻辑。

        if (error.status === 401) {
          this.authenticationService.logout();
          this.router.navigate(['login']);
          return EMPTY; // <- add this
        }