Как избежать подписки в сервисе Angular?

Question

[kachurynets]

Допускается ли в моем случае использование подписки в сервисе?
Как можно избежать здесь подписки и сделать код лучше?

Сomponent

public getUsers(): void {
    this.isLoading = true;
    this.sub.add(
      this.adminService.getAdministrators().subscribe((administrators) => {
        if (administrators) {
          this.administrators = administrators;
          this.dataSource.data = administrators.map(user => {
            return new Administrator(user);
          });
          this.isLoading = false
        }
      })
    );
  }

Service

public administrators: BehaviorSubject<any> = new BehaviorSubject<any>([]);
  public administrators$: Observable<any> = this.administrators.asObservable();

  constructor(private http: HttpClient) {}

  public getAdministrators(): Observable<IAdministrator[]> {
    if (!this.administrators.value.length) {
        this.http.get(`${environment.baseUrl}/api/v1/admin/users`).pipe(
          tap((response) => {
            this.administrators.next(response);
          })
        ).subscribe();
    }
    return this.administrators.asObservable();
  }

Answer 1

[Антон Швец]

удалить этот ворох кода и сделать оператор (назовите как удобнее)

export const handler = <T>() => pipe(
        map((value: T) => ({ loading: false, value })),
        startWith({ loading: true }),
        catchError(error => of({ loading: false, error })),
        shareReplay({ refCount: true, bufferSize: 1 }),
      )

потом в сервисе просто

getAdministrators() {
  return this.http.get<IAdministrator[]>(`api/v1/admin/users`).pipe(handler())
}

все префиксы к юрл переносим в интерцептор

в компоненте делаем дата-сурс через pipe(map(...))
Обсерваблы выводятся в темплейт через асинк-пайпы. И все, явные подписки тут не нужны.

Comments

[kachurynets]

Как правильно поступать в ситуации, когда нужно взять значение не з кеша, а обнулить данные и получить актуальные с сервера?

[Антон Швец]

kachurynets,

private update = new BehaviorSubject();

getAdministrators() {
  return this.update.pipe(
    switchMap(() => this.http.get<IAdministrator[]>(`api/v1/admin/users`)),
    handler()
  );
}

refetch() {
  this.update.next();
}

как один из вариантов. Это стейт фактически. Вместо пустого update можно так же отправлять параметры запроса, например.

Можно просто вызвать getAdministrators() еще раз, создав новый обсервабл. Асинк-пайп отписывается от старого, если видит что поток изменился.