Angular 5 HttpInterceptor 流程

Question

我正在尝试在我的一个 Angular 应用程序中实施 HttpInterceptor，以便在每个请求中显示 spinner。微调器显示得很漂亮。但是，我还实现了一个 notificationService，它利用 SweetAlert 根据服务器的响应显示通知模式。我能够显示 Success 模态但不能显示 Error 模态。我的代码如下：

拦截器：

 intercept(req: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
 this._spinnerService.requestStarted();
 return next.handle(req).do(
   (event: HttpEvent<any>) => {
     if (event instanceof HttpResponse) {
       this._spinnerService.requestEnded();
     }
   },
   (err: any) => {
     if (err instanceof HttpErrorResponse) {
       this._spinnerService.requestEnded();
     }
   }
 );
}

登录：

login() {
this.spinnerSub = this.spinnerService.spinnerState.subscribe(state => {
  this.showSpinner = state;
});
   const user = {
     email: this.userEmail,
     password: this.userPw
   };

   this.authService.authenticateUser(user).subscribe((data: ILoginResponse) => {
     this.spinnerSub = this.spinnerService.spinnerState.subscribe(state => {
        this.showSpinner = state;
     });
     if (data.success) {
      this.notificationService.showSuccess(data.title, data.message)
        .then((result) => {
          console.log(result);
          this.router.navigate(['/user/dashboard']);
        })
        .catch((reason) => {
          console.log('--> Alert dismissed: ', reason);
        });
     } else {
       this.notificationService.showError(data.title, data.message)
        .then((result) => {
          console.log(result);
        })
        .catch((reason) => {
          console.log('--> Error dismissed: ', reason);
        });
     }
   });
  }

通知服务：

  showSuccess(type, message) {
   return swal({
    title: 'Success',
    text: message,
    type: type
   });
  }

  showError(type, message) {
    return swal({
      title: 'Error',
      text: message,
      type: type
    });
  }

任何 help/suggestion 将不胜感激。谢谢。

编辑：我尝试将 NotificationService，特别是 showError() 放在拦截器的 (err:any) 块中。很好，但我想在特定组件（如登录）上保留 NotificationService，而不是每个请求。

Answer 1

更改您的代码

login() {
    this.spinnerSub = this.spinnerService.spinnerState.subscribe(state => {
        this.showSpinner = state;
    });
    const user = {
        email: this.userEmail,
        password: this.userPw
    };

    this.authService.authenticateUser(user).subscribe((data: ILoginResponse) => {
        this.spinnerSub = this.spinnerService.spinnerState.subscribe(state => {
            this.showSpinner = state;
        });
        console.log('My data:', data);
        this.notificationService
            .showAlert(data.title, data.message, 'success', res => {
                console.log(res);
                this.router.navigate(['/user/dashboard']);
            });
    }, error => {
        console.log('My error:', error);
        this.notificationService
            .showAlert(err.title, err.message, 'error', res => {
                console.log(res);
            });
    });
}



showAlert(title: string, message: string, type: string, callback?: any) {
    return swal({
        title: title,
        text: message,
        type: type
    }).then(() => {
        if(callback) {
            callback(message);
        }
    });
}

Answer 2

拦截器的流程是为了防止 faulsy 从 RestAPI 调用返回响应。

例如，在我上面的问题中，我检查了 data.success，因为这是我在后端设置的方式。拦截器将确保您获得 truthy 响应，并且任何归类为 Error 的内容都将设置为 HttpErrorResponse。

this.authService.authenticateUser(user).subscribe(
 (data: ILoginResponse) => {
 console.log(data);
 this.spinnerSub = this.spinnerService.spinnerState.subscribe(state => {
    this.showSpinner = state;
 });
 this.notificationService.showSuccess(data.title, data.message)
    .then((result) => {
      console.log(result);
      this.router.navigate(['/user/dashboard']);
    })
    .catch((reason) => {
      console.log('--> Alert dismissed: ', reason);
    });
   },

   (err: any) => {
      console.log(err);
      this.notificationService.showError('error', 'Just an error'); <- my NotificationService will 
get called here instead of getting called up in the else block like in my question above.
    });

Angular 5 HttpInterceptor 流程

Angular 5 HttpInterceptor Flow

angular-http-interceptors

angular