Javascript 角度测量的最佳实践_Javascript_Angular

Javascript 角度测量的最佳实践

javascript angular

Javascript 角度测量的最佳实践,javascript,angular,Javascript,Angular,我刚刚完成了我的Angular课程，我已经发现了我所学内容与Angular官方文档之间的一些差异假设我想要恢复一个ID为API的用户根据我的经验教训，我会这样做： export class UserService { constructor( private httpClient: HttpClient ) { } public user: User; // local variable using User model public userSubject:

我刚刚完成了我的Angular课程，我已经发现了我所学内容与Angular官方文档之间的一些差异

假设我想要恢复一个ID为API的用户

根据我的经验教训，我会这样做：

export class UserService {

  constructor(
    private httpClient: HttpClient
  ) {
  }

  public user: User; // local variable using User model
  public userSubject: BehaviorSubject<User> = new BehaviorSubject<User>(null);

  async getSingleUserFromServer() {
    await this.httpClient.get<any>('https://xvalor.repliqa.fr/api/v1/user/' + this.userId).subscribe(
      (response) => {
        this.user = response;
        this.userPortfolios = this.user.portfolioAssoc;
        this.emitSubjects();
      });
  }

  emitSubjects() {
    this.userSubject.next(this.user);
  }
}

导出类用户服务{
建造师(
私有httpClient:httpClient
) {
}
公共用户：user；//使用用户模型的局部变量
public userSubject:BehaviorSubject=new BehaviorSubject（null）；
异步getSingleUserFromServer（）{
等待此消息。httpClient.get（'https://xvalor.repliqa.fr/api/v1/user/“+this.userId）。订阅(
（回应）=>{
this.user=响应；
this.userportfolions=this.user.portfolioAssoc；
这个.emitSubjects（）；
});
}
主要科目（）{
this.userSubject.next（this.user）；
}
}

这是如何进行的

getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      tap(_ => this.log('fetched heroes')),
      catchError(this.handleError<Hero[]>('getHeroes', []))
    );
}

getHeroes（）：可观察{
返回this.http.get（this.heroesUrl）
.烟斗(
轻触（=>this.log（'fetched heros'）），
catchError（this.handleError（'getHeroes'，[]））
);
}

我知道这两种方法都在做同样的事情，我只是想确定我应该使用哪种方法，特别是在大型项目开发中。

观察物和被摄物是rxjs中两种不同的物体，它们带来了不同的性质。这个问题的答案显示了一些关键的区别：

可观察物和受试者是来自rxjs的两个不同的物体，它们具有不同的性质。这个问题的答案显示了一些关键区别：

我坚持第二种方法，因为它更通用，并且使用了

可观察的。Observale允许发出任意数量的事件，并将为每个事件调用回调。Promise在完成后生成单个事件
此外，服务类不应该有async
和wait
部分。服务的目标是返回数据，UI组件可以使用async
和await
部件使用数据async
和await
是避免编写的语法糖。subscribe
部分，因为它非常冗长。因此，在UI组件中编写async
和wait

如果要使用承诺
，则您的服务不应包含订阅
部分：
getSingleUserFromServer() {
    return this.httpClient.get<any>('https://xvalor.repliqa.fr/api/v1/user/' + this.userId);
}

getSingleUserFromServer（）{
返回此.httpClient.get（'https://xvalor.repliqa.fr/api/v1/user/“+this.userId）；
}

但是，最好从您的服务中返回可观察的
。
我坚持使用第二种方法，因为它更通用，并且使用可观察的
。Observale允许发出任意数量的事件，并将为每个事件调用回调。Promise在完成后生成单个事件
此外，服务类不应该有async
和wait
部分。服务的目标是返回数据，UI组件可以使用async
和await
部件使用数据async
和await
是避免编写的语法糖。subscribe
部分，因为它非常冗长。因此，在UI组件中编写async
和wait

如果要使用承诺
，则您的服务不应包含订阅
部分：
getSingleUserFromServer() {
    return this.httpClient.get<any>('https://xvalor.repliqa.fr/api/v1/user/' + this.userId);
}

getSingleUserFromServer（）{
返回此.httpClient.get（'https://xvalor.repliqa.fr/api/v1/user/“+this.userId）；
}

但是，最好从您的服务中返回可观察值。
您的第一种方法存在缺陷，因为使用者必须执行两个单独的操作：调用getSingleUserFromServer（）
进行调用，订阅UserService.user
使用结果。如果出现错误，他将不会收到任何反馈
现在要遵守官方的指导方针。顺便说一句，如果您的目标是将用户额外存储为每个人都可用的变量，那么使用可观察模式，只需向管道添加另一个tap
：
httpClient.get(url)
    .pipe(
        someOperator(),
        tap(user => this.user = user),
        anotherOperator(...someArgs),
    )

您的第一种方法存在缺陷，因为使用者必须执行两个单独的操作：调用getSingleUserFromServer（）
进行调用，订阅UserService.user
使用结果。如果出现错误，他将不会收到任何反馈
现在要遵守官方的指导方针。顺便说一句，如果您的目标是将用户额外存储为每个人都可用的变量，那么使用可观察模式，只需向管道添加另一个tap
：
httpClient.get(url)
    .pipe(
        someOperator(),
        tap(user => this.user = user),
        anotherOperator(...someArgs),
    )

你绝对不应该等待观察结果。这不是这里的问题。。。但我会根据自己的专业知识来评论。首先，你的例子是错误的。您正在使用wait
进行订阅吗？那是不可能的。您应该使用toPromise（）
。但是，请不要使用toPromise（）
。Angular正在彻底使用rxjs，我们建议您也这样做。在大型项目开发中，您甚至应该考虑使用某种反应式存储机制，如ngrx或ngxs或任何其他。有了这一点，您可以使您的数据流更有条理，更易于维护和测试官方内容在角度应用程序中使用rxjs
而不是async await
，这是一个很好的实践。您真的应该已经完成了heros之旅，因为您的教程您绝对不应该等待观察到的内容。这对您来说不是一个真正的问题在这里但我会根据自己的专业知识来评论。首先，你的例子是错误的。您正在使用wait
进行订阅吗？那是不可能的。您应该使用toPromise（）
。但是，请不要使用toPromise（）
。Angular正在彻底使用rxjs，我们建议您也这样做。在大型项目开发中，您甚至应该考虑使用某种反应式存储机制，如ngrx或n