Pratique Exemplaire En Matière De Gestion Des Erreurs Angular2
j'ai une question sur la meilleure pratique de gestion des erreurs Angular2. La est le code que j'utilise pour attraper une erreur:
Getdata(data: object){
let body = JSON.stringify(data);
let headers = new Headers({ 'Content-Type': 'application/json' });
return this.http.post('/getData', body)
.map((res) => res.json())
.catch(this._errorHandler);
}
_errorHandler(error: Response){
console.log("Error Dataservice", error);
return Observable.throw(error || "Server Error");
}
dois-je faire une prise pour chaque nouvelle méthode ou Puis-je toujours utiliser le _errorHandler?
Thx!
2 réponses
captures seulement dans les composants
C'est ce que je fais dans mon projet et ça a très bien fonctionné. Les Services n'ont jamais de catch block. Chaque méthode renvoie un flux et tous les params sont des flux. Le bloc de capture est placé à l'intérieur du composant et les mesures appropriées sont prises.
Exceptions
il y a des exceptions où je me retrouve entre les deux .
- erreur tout en récupérant le token auth, gérer l'erreur. Redirection vers la page de connexion.
- erreur lors de l'exécution d'appels multiples, annuler les modifications
il est très rare que je gère les erreurs entre les deux. La plupart du temps, le flux commence et se termine dans le composant et la gestion d'erreur est effectué dans les composants.
exemple
tous les params se terminant par $ sont des cours d'eau.
Composant :
public error = false;
public errorMessage = '';
public users$;
constructor(private router: Router, private _userService: UserService){
const userId$ = this.router.params.map(params => params['id']);
this.users$ = this._userService.getUsers$(userId$)
.catch(error => {
this.error = true;
//translate error into user friendly language
this.errorMessage = error;
});
}
HTML
<ul *ngIf="!error">
<li *ngFor="let user of users$ | async " >{{user.name}}</li>
</ul>
UserService
public getUsers$(userId$: Observable<string>): Observable<User[]>{
return userId$.flatMap(
userId => this.authService.getAuthToken$()
.flatMap(
authToken => this.http.get('url', {userId})
.map(res => res.json())
);
}
AuthService aura un bloc catch qui redirige l'utilisateur vers la page de connexion si authtoken n'est pas trouvé ou la session expirée ou n'importe quelle raison. Reste tous les endroits pour toutes les erreurs du bloc catch est au niveau du composant.
je viens d'arriver avec cet exemple, s'il y a des erreurs faites-le moi savoir .
Blocs Catch dans les Services Et Abonnement Erreur Rappels dans les Composants
C'est ce que je suis venu à utiliser que mon projet s'est développé. Le bloc catch dans le service est responsable de la transformation de l'erreur. Le callback d'erreur dans le composant est responsable de la mise à jour de toute logique de vue.
Service
je récupère rarement les données dont j'ai besoin dans le format dont j'ai besoin de l'api, donc je transforme les données en a.méthode map (). Puis j'attache un bloc catch à la séquence.
// Service Class
getTableData(): Observable<Table>{
return this.http.get('url')
.map(res => {
// transform data as needed
return transformedData;
}
.catch(err => {
// transform error as needed
let transformedError = GlobalFunction.transformError(err);
return Observable.throw(transformedError);
}
}
maintenant j'exécute ce que je veux transformer quand une erreur se produit. Par exemple, je peux appeler une méthode globale qui convertit une erreur dans un convivial réponse
// GlobalFunction Class
transformError(err){
switch(err.status){
case 404:
return {
status: err.status,
message: 'Oops, it looks like that resource was not found'
}
break;
}
}
composant
maintenant dans mon composant, Je m'abonne à la séquence
// Component Class
ngOnInit(){
this.loading = true;
this.error = false;
this.subscription = this.service.getTableData().subscribe(
res => {
this.table = res;
this.loading = false;
},
err => {
this.message = err.message;
this.error = true;
this.loading = false;
}
);
}
en contenant toutes mes données transform dans le service, j'ai gardé la vue logique nice & lean. Je crois que cette approche maintient les pièces séparées. Le service fournit les données et la composante actualise la vue.