2017-11-26 1 views
1

Ich versuche HttpInterceptor in einer meiner Angular-Anwendung zu implementieren, um eine spinner bei jeder Anfrage zu zeigen. Der Spinner zeigt wunderschön. Ich implementierte jedoch auch eine notificationService, die SweetAlert verwendet, um Benachrichtigungsmodale basierend auf der Antwort vom Server anzuzeigen. Ich konnte ein Success Modal aber nicht Error Modal anzeigen. Meine Codes sind unten:Angular 5 HttpInterceptor Flow

INTERCEPTOR:

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:

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

ANMELDUNG SERVICE:

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

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

Jede Hilfe/Anregung sehr geschätzt würde. Vielen Dank.

EDIT: Ich versuchte, die NotificationService, speziell die showError() in den (err:any) Block des Interceptor setzen. Nun, es funktioniert, aber ich möchte die NotificationService auf bestimmte Komponenten (wie Login), nicht jede Anfragen halten.

Antwort

0

Der Fluss des Interceptor ist faulsy Reaktion zu verhindern, dass ein RestAPI Anruf kommen zurück.

Zum Beispiel in meiner Frage oben, überprüfe ich data.success, weil das ist, wie ich in meinem Backend eingerichtet. Der Interceptor stellt sicher, dass Sie eine truthy Antwort erhalten und was als Error kategorisiert wird, wird als HttpErrorResponse festgelegt.

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

Code ändern

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

Ich denke, ich bin gut mit dem 'Spinner' Teil, obwohl' finally() 'ist ein guter Ansatz. Wie auch immer, ich blieb bei der Anzeige des Modes "Error" stehen. Bitte schau dir meine Frage oben nochmal an, der 'else' Block des' login() 'wird nie berührt, wenn ich ein' Falsches Passwort' eingegeben habe. Der 'notificationService' in diesem Block wird nie aufgerufen. Wenn ich jedoch den 'notificationService' in den Block' (err: any) 'des Interceptors bringe, funktioniert es. Aber so möchte ich die Benachrichtigung nicht implementieren (nicht bei JEDEN Anfragen). –

+0

ok. Ich aktualisierte meine Antwort –

+0

Danke für die Antwort. Das habe ich auch als Antwort eingereicht. –