时间戳

首页 > 解决方案 > Angular 的最佳实践

javascript - Angular 的最佳实践

问题描述

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

假设我想恢复一个具有 API ID 的用户。

以下是我将如何根据我的课程做的：

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

这是角度文档的处理方式

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

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

标签： javascriptangular

解决方案

我会坚持第二种方法，因为它更通用并且使用Observable. Observale 允许发出任意数量的事件，并且将为每个事件调用回调。Promise 在完成后生成单个事件。

另外，服务类不应该有async和await部件。服务的目标是返回数据，UI组件可以使用async和部件来消费数据await。async并且await是语法糖以避免编写.subscribe部分，因为它真的很冗长。所以在你的 UI 组件中编写async和。await

如果您想使用Promise，那么您的服务不应包含subscribe以下部分：

getSingleUserFromServer() {
    return this.httpClient.get<any>('https://xvalor.repliqa.fr/api/v1/user/' + this.userId);
}

但是，最好Observables从您的服务中返回。

推荐阅读