Кэширование данных в сервисе

Question

Я очень плохо знаком с rxjs и асинхронным программированием в целом.

Когда компонент запрашивает данные из моего сервиса, я хочу использовать свой API, только если у меня его еще нет.Что-то вроде следующего псевдокода:

if (!data) {
  data = this.getDataFromApi();
}
return data;

Так вы бы делали это синхронно на таком языке, как C #.По сути, мне бы каждый раз вызывал getDataFromApi () один раз.

Как мне добиться того же в Angular / rxjs?

Пусть начнется оскорбление.

Answer 1

Это один из способов кеширования ваших данных -

export class YourCacheService {

  data: any; //set type of the data as per your app
  constructor() { }

  getData(): Observable<any> {
    //if data exist then simply return the data wrapped in an observable
    if (this.data) {
      return of(data);
    } else {
      //otherwise return the response of the API which will have the data
      //and save the data in this.data 
      return this.getDataFromApi()
                 .pipe(
                   tap(data => {
                    this.data = data;
                    }
                  );
    }
  }
}

Теперь потребитель yourcacheService.getData() подпишется на наблюдаемое, возвращаемое getData(), чтобы получить такие данные -

yourcacheService.getData()
                  .subscribe(data => {
                    //do whatever you want to do with the data
                  });