NGXS - 处理调度多个操作

Question

介绍：

我有一个 Angular 应用程序，使用 NGXS 作为状态管理模式，使用 Angular Material 作为 UI 组件（例如用于通知的小吃栏）。该应用程序有几个不同的操作，我想在用户单击“保存”按钮时立即分派这些操作。之后我想通知用户所有操作是否已成功分派。

问题：

即使一项操作失败，我仍然会收到消息“更改已成功保存”，但该操作本身会记录发生的错误。有没有办法以不同的方式处理保存函数中的错误？

动作1 - 上传头像

  @Action(UploadAvatar)
  public uploadAvatar(ctx: StateContext<AuthStateModel>, action: UploadAvatar) {
    return this.uploadService.uploadAvatar(ctx.getState().token, action.avatar).pipe(
      tap((result: any) => {
        console.log(result);
      }),
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return of(ctx.patchState({ responseStatus: error.status }));
      })
    );
  }

操作 1 - 更新用户

  @Action(UpdateUser)
  public updateUser(ctx: StateContext<AuthStateModel>, action: UpdateUser) {
    return this.userService.updateUser(ctx.getState().token, action.user).pipe(
      tap((result: any) => {
        console.log(result);
      }),
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return of(ctx.patchState({ responseStatus: error.status }));
      })
    );
  }

保存功能

  public save() {
    try {
      this.store.dispatch(new UploadAvatar(this.avatar));
      this.store.dispatch(new UpdateUser(this.user));
      this.snackbar.showSnackbar('Changes were successfully saved');
    } catch (error) {
      this.snackbar.showSnackbar('Changes could not be saved');
    }
  }

Answer 1

您正在使用 rxjs 捕获错误catchError，因此它永远不会到达您的 try/catch. 此外，调度是异步的，因此它始终会显示showSnackbar成功消息。这可能效果更好。

_{未经测试的代码，但也许你会更好地理解这个想法}

public save(): void {
  this.store.dispatch([
    new UploadAvatar(this.avatar),
    new UpdateUser(this.user)
  ]).subscribe({
    next: () => this.snackbar.showSnackbar('Changes were successfully saved'),
    error: () => this.snackbar.showSnackbar('Changes could not be saved')
  });
}

@Action(UploadAvatar)
public uploadAvatar(ctx: StateContext<AuthStateModel>, action: UploadAvatar) {
  return this.uploadService.uploadAvatar(ctx.getState().token, action.avatar).pipe(
    catchError((error: HttpErrorResponse) => {
      ctx.patchState({ responseStatus: error.status });

      return throwError(error);
    })
  );
}

@Action(UpdateUser)
public updateUser(ctx: StateContext<AuthStateModel>, action: UpdateUser) {
  return this.userService.updateUser(ctx.getState().token, action.user).pipe(
    catchError((error: HttpErrorResponse) => {
      ctx.patchState({ responseStatus: error.status });

      return throwError(error);
    })
  );
}

基本上，您捕获状态中的错误，将响应状态写入状态，然后重新抛出相同的错误，这可以通过调度捕获