Angular 6 сохранить вызов API в переменную службы

Question

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

export class CategoryService {
  categories: Category[]
  constructor(private http: HttpClient, private handleError: HandleErrorService) {
  }

  /************ REST CALLS *****************/
  /**
   * Retrieve configuration categories 
   */
  private getListCategories() {
    return this.http.get<Category[]>("/api/configuration/category").pipe(
      map(res => {
        this.categories = res;
        return res;
      }),
      catchError(err => this.handleError.handleError(err, { severity: 'error', summary: 'Error retrieving the list of categories', life: 5000 })) // then handle the error;
    );
  }
  /************ CATEGORY MANAGEMENT ************/
  get getCategories() {
    if (this.categories)
      return this.categories;
    else
      this.getListCategories().subscribe((categories:Category[])=>{
        return categories;
      });
  }

}

, но в моем getCategories мне приходится ждать ответа от вызова API.Есть шаблон или лучшая практика для достижения моей цели?Конечно, я могу установить служебную переменную из компонента, но после этого другой компонент может вызывать API вместо переменной.

Answer 1

Невозможно вернуть значение из подписки.Это асинхронный.У вас есть несколько вариантов, таких как преобразование Observable в Promise и работа с async / await, или вы можете вернуть observable и позволить тем, кто вызывает службу, подписаться на нее.

Пример:

get getCategories() {
    if (this.categories)
      return of(this.categories);
    else
      return this.getListCategories();
  }

И затем вы вызываете метод getCategories () внутри компонента

this.categoryService.getCategories.subscribe( categories => {
   //console.log(categories)
})

Посмотрите на это сообщение в блоге , автор объясняет, как встроить механизм кэширования вСервис Angular.

Answer 2

Я склонен использовать Observable для этого, чтобы оставить функцию подписки вне службы для такого типа вещей.

getCategories() {
  return this.categories
    ? of(this.categories)
    : this.getListCategories().do((categories:Category[]) => {
        this.categories = categories;
      });
}

Answer 3

Попробуйте использовать функцию localStorage, чтобы сохранить ваше значение и восстанавливать его до тех пор, пока вы не закроете окно браузера.

localStorage.setItem("key","value")
//after you can get the value using 
localStorage.getItem("key")

Не забывайте, что getItem всегда будет возвращать String, а setItem нужно String в качестве значения и ключ