Angular 最佳實踐

Question

我剛剛完成了我的 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', []))
    );
}

我明白這兩種方法都在做同樣的事情，我只是想確定我應該使用哪一種，尤其是在大項目開發中。

Answer 1

我會堅持第二種方法，因為它更通用並且它使用Observable 。 Observale 允許發出任何數量的事件，並且將為每個事件調用回調。 Promise 在完成后生成單個事件。

此外，服務類不應有async和await部分。 service 的目標是返回數據，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 。

Answer 2

您的第一種方法有缺陷，因為使用者必須執行兩個單獨的操作：調用getSingleUserFromServer()進行調用，並訂閱UserService.user以使用結果。 如果出現錯誤，他將不會收到任何反饋。

現在堅持官方指南。 順便說一句，如果您的目標是另外將用戶存儲為每個人都可以使用的變量，那么使用 Observable 模式就像在管道中添加另一個tap一樣簡單：

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

Answer 3

Observables 和 Subjects 是兩個與 rxjs 不同的對象，它們帶來了不同的屬性。 這個問題的答案顯示了一些關鍵差異： rxjs 中的 Observable 和 Subject 之間有什么區別？