微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

用于保存数据的 Angular 调用服务

如何解决用于保存数据的 Angular 调用服务

我有一个创建用户的表单,如果它已经存在于 base 中,我将返回一个错误并打开一个弹出窗口

我的服务:

  data$ = new BehaviorSubject({
    userList: {},user: {},create: ''
  });
  
  dispatch(action: Action): Observable<true | { error: string; }> {
    switch (action.type) {
      case ActionTypes.USER_GET_LIST:
        this.getUsers(action.payload);
        return of(true);
      case ActionTypes.USER_CREATE:
        this.createuser(action.payload);
        return of(true);
    }
  }

  private createuser(user: User){
    this.http.post{body : user})
    .subscribe(
        message => this.data$.next({...this.data$.value,create: message}),error => {
          this.data$.error(error)
          if (error.error?.title === 'CustomException' && error.status === 400) {
            //OPEN POPUP
            return throwError(error);
          } else {
            return throwError(error);
          }   
        }
    ); 
  }

我在我的组件中调用服务:

this.userService.dispatch({ type: ActionTypes.USER_CREATE,payload: user });
this.userService.data$.asObservable();
this.router.navigate(['/users/user/list']);

我的问题是它直接进入列表页面,如果出现错误,则显示列表页面上。我想等待返回并且只有在没有错误时才被重定向

解决方法

代码有几个问题:

a1) <html lang="en"> <head> <script src="./js/collectinfo.js"></script> <script src="./js/submit.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <form id="payment" name="payment" action="https://example.com" method="post"> <label for="fName">First Name</label> <input name="fName" id="fName" required="required" /> <button onclick="load()" class="button1" id="bcheck"> Submit Order </button> </form> </body> </html>

这没有任何作用。 likes = driver.find_elements_by_xpath("//div[@class='label' and .='CLAIM']") for like in likes: like.click() 返回您的 BehaviourSubject 的 Observable,但您不将其分配给变量或以任何其他方式使用它。很难说这意味着什么。

a2) this.userService.data$.asObservable();

这也返回一个既未分配也未使用的 Observable。

a1) 和 a2) 是您的代码冲向 ...data$.asObservable(); 的原因。但在那之前 http 请求还没有完成,你想用 a1) 实现的任何事情都没有发生。

b) this.userService.dispatch({ type: ActionTypes.USER_CREATE,payload: user });

您在交换机中调用具有异步行为的函数。但是您无需等待 this.router.navigate(['/users/user/list']); / switch (action.type) { ... } 完成就立即返回 Observable

c) 一般评论:

如果您刚开始使用 Observables、ngrx 和 rxjs。

根据我的经验,我建议先熟悉 Observables - 或其他异步内容。

然后看看 rxjs 如何让你通过使用 .pipe() 和 rxjs/operators 来处理 Observables。

最后看看ngrx。您的 createUser 函数执行的内容非常适合 ngrx/effects,如果您在 createUser 内部使用管道而不是订阅。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。