如何使用 snackbar 处理 Angular 中的错误

Question

我的任务是在此代码中添加错误处理，但不确定如何执行此操作，所以如果我能得到任何建议或帮助，我将不胜感激。

只是想添加一个小吃店，如果由于网络问题或其他原因没有保存，则提示“发生错误”。

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

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

Answer 1

您可以在组件中订阅错误操作，然后将错误显示为副作用，不要在 Effect 文件中这样做以保持干净。假设您有一个 UPDATE_ERROR 操作。

你当然会 return 一个新动作“update_failed”，以防更新你的数据时出错，你的效果文件中会有这样的东西：

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

然后您可以收听您的“UPDATE_ERROR”操作，无论何时发送它，您都可以显示您的 snackbar 以显示错误，因为您在组件中订阅它，如下所示：

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

Answer 2

我不知道这样做是否好，但你可以在你的效果中调用你的小吃店。

在获取 api 调用的 returned 值时，return 成功操作或错误操作（或直接调用您的小吃店）。

根据文档，您的效果如下所示：

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

请注意 rxjs 中的 catchError 用法，如果您 api 调用 return 不同于有效 HttpResponse 的内容（我猜是使用 2xx 代码），则会触发该用法。

Answer 3

如果使用Ngrx存储数据，则必须为每个异步事件创建三个动作，例如获取配置文件：GetProfile、GetProfileSuccess、GetProfileFailed。为了进一步处理 API 我们通常使用效果，我们总共有一个减速器、动作和效果来处理配置文件（例如）。当我们执行异步事件时，我们会抛出一个错误操作或提供成功操作。效果文件：

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

在同一个文件中，我们处理有效的错误操作：

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

如何使用 snackbar 处理 Angular 中的错误

How to handle error in Angular by using snackbar

error-handling

typescript

angular-material

ngrx

angular