Лучшая практика Angular

Question

Я только что закончил свои Angular уроки, и я уже обнаружил некоторые различия между тем, что я изучаю, и Angular официальной документацией.

Давайте представим, что я хочу восстановить пользователя с идентификатором 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);
  }
}

, а вот как angular сделать c продолжить

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

Я понимаю, что оба метода тихо делают одно и то же, я просто хочу быть уверен, какой из них использовать, особенно в разработке больших проектов.

Answer 1

Я бы придерживался второго подхода, так как он более обобщенный c и использует Observable. Observale позволяет генерировать любое количество событий, и для каждого события будет вызываться обратный вызов. Promise генерирует одно событие после завершения.

Кроме того, в классе обслуживания не должно быть частей async и await. Цель службы - вернуть данные, а компонент пользовательского интерфейса может использовать данные, используя части async и await. async и await являются синтаксисами c сахара, чтобы избежать записи .subscribe части, поскольку она действительно многословна. Так что пишите async и await в ваших компонентах пользовательского интерфейса.

Если вы хотите использовать Promise, то ваша служба не должна иметь subscribe part:

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

Однако Лучше вернуть Observables из вашего сервиса.

Answer 2

Ваш первый подход имеет недостатки: потребитель должен выполнить две отдельные операции: позвонить getSingleUserFromServer(), чтобы совершить вызов, и подписаться на UserService.user, чтобы получить результаты. И в случае ошибок он не получит никакой обратной связи.

Придерживайтесь официальных правил пока. Кстати, если ваша цель состояла в том, чтобы дополнительно сохранить пользователя как переменную, доступную каждому, то с шаблоном Observable это так же просто, как добавить еще один tap в канал:

httpClient.get(url)
    .pipe(
        someOperator(),
        tap(user => this.user = user),
        anotherOperator(...someArgs),
    )

Answer 3

Наблюдаемые и Субъекты - это два различных объекта из rx js, которые придают им различные свойства. Ответы на этот вопрос показывают некоторые из ключевых отличий: В чем разница между наблюдаемым и субъектом в rx js?