0
votes

Comment gérer les erreurs dans Angular en utilisant le snackbar

Ma tâche est d'ajouter la gestion des erreurs dans ce code, mais je ne sais pas vraiment comment faire cela, donc je serais vraiment reconnaissant si je peux obtenir une suggestion ou de l'aide.

Je veux juste ajouter Un snack-bar disant "Erreur a s'est produite "s'il n'a pas été enregistré en raison d'un problème de réseau ou de quelque chose.

import {Store} from '@ngrx/store';

saveClick(){
  this.store.dispatch(updateChart({chart: this.chart}))
}

typescript angular angular-material ngrx error-handling

2 commentaires

Quelle gestion de magasin utilisez-vous? NGRX? dites-nous s'il vous plaît, la réponse peut être différente en fonction de cela.

salut Quentin. Oui c'est ngrx

3 Réponses :

0
votes

Vous pouvez vous abonner aux actions d'erreur dans votre composant et ensuite afficher vos erreurs comme effets secondaires, ne le faites pas dans le fichier d'effet afin de le garder propre. disons que vous avez une action UPDATE_ERROR.

vous retournerez bien sûr une nouvelle action "update_failed" en cas d'erreur lors de la mise à jour de vos données, vous aurez quelque chose comme ça dans votre fichier d'effet:

 constructor(public store: Store<fromRoot.State>, private actions$: Actions) {
  this.actions$.pipe(
   ofType(yourActions.ChartActionTypes.Failure),
   tap(_ => {
    this.snackBar.open("Update failed", action, { duration: 2000,});
   }));
}

et vous pourrez ensuite écouter votre action "UPDATE_ERROR", chaque fois qu'elle est envoyée, vous pouvez afficher votre snack-bar pour afficher une erreur, car vous vous y abonnez dans votre composant comme suit:

...
catchError(error => of(new yourActions.UpdateError({ error })))

1 commentaires

Salut Fateh, merci pour cela mais je suis tellement confus. Je pensais que ce serait beaucoup plus simple, mais pouvez-vous s'il vous plaît m'expliquer plus sur ce qui se passe dans votre code et ce qui est arrivé à mon UpdateChart ?. merci

2
votes

Je ne sais pas si c'est la bonne façon de le faire, mais vous pouvez appeler votre snack-bar dans votre effet.

Lorsque vous obtenez la valeur renvoyée de votre appel api, renvoyez une action de succès ou une action d'erreur (ou appelez directement votre snack).

D'après la documentation, voici à quoi ressemblerait votre effet:

export class MovieEffects {
 
  loadMovies$ = createEffect(() => this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError(() => {
          /* Call snackbar here, or return an error action */
          this._snackBar.open('Snackbar message');
        })
      ))
    )
  );
 
  constructor(
    private actions$: Actions,
    private moviesService: MoviesService,
    private _snackBar: MatSnackBar
  ) {}
}

Notez l'utilisation catchError de rxjs qui est déclenché si votre appel api renvoie quelque chose de différent d'une HttpResponse valide (avec du code 2xx je suppose).

4 commentaires

par n'importe quel hasard pouvez-vous me montrer comment parce que je ne comprends pas vraiment. Merci

@aaselab J'ai édité ma réponse. Vous pouvez également vérifier les réponses des autres, car elles semblent également exactes

Salut Quentin, par hasard pouvez-vous me montrer comment appeler snackbar sur cathError ()? Merci

J'ai modifié ma réponse pour appeler un simple snack. Notez l'injection privée dans le constructeur. Vous devrez également importer MatSnackBarModule dans votre app.module et MatSnackBar dans vos fichiers MovieEffects. Reportez-vous à material.angular.io/components/snack-bar/overview pour en savoir plus sur le snack, c'est assez simple

1
votes

Si vous utilisez Ngrx pour stocker des données, vous devez créer trois actions pour chaque événement asynchrone, par exemple, pour obtenir un profil: GetProfile, GetProfileSuccess, GetProfileFailed. De plus, pour travailler avec l'API, nous utilisons généralement des effets, au total nous avons un réducteur, des actions et des effets pour travailler avec un profil (par exemple). Et lorsque nous faisons un événement asynchrone, nous lançons une action d'erreur ou fournissons une action de réussite. Fichier d'effets:

  public profileError$: Observable<Action> = createEffect(() =>
    this.actions$.pipe(
      ofType(
        ProfileApiActionTypes.GetProfileFailed,
      ),
      tap(({ payload }) => {
        // your logic with snackbar
      },
    ),
    { dispatch: false },
  );

Dans le même fichier, nous gérons l'action d'erreur en vigueur:

  public loadProfile$: Observable<Action> = createEffect(() =>
    this.actions$.pipe(
      ofType(ProfileApiActionTypes.GetProfile),
      mergeMap(() =>
        this.profileDataService.getProfile().pipe(
          map(({data}) => getProfileSuccessAction({ data })),
          catchError((error) => of(getProfileFaildAction({ payload: error }))),
        ),
      ),
    ),
  );

0 commentaires