Как реализовать кеширование для Angular SPA

Я считаю, что у вас есть вызов API Dot net core для получения списка стран. На мой взгляд, вы должны кешировать вызов API, который фактически получает список стран.

Несмотря на то, что все приложения управляются данными и выглядят очень динамично, то, что действительно менялось в одном и том же пользовательском сеансе, было не так уж и много, но мы все равно делали http-запросы на новый контент.

Самое простое решение - кеширование. Кеширование где? На сервере? но это не мешает всем нашим приложениям работать с нашими сервисами и, таким образом, - увеличивать нагрузку на них.

Может быть, мы могли бы использовать сервис-воркер, поскольку он позволяет кешировать вызовы API? Да, это был один из вариантов, поскольку он уже имеет довольно хорошую интеграцию с Angular и позволяет использовать простое решение для выборочного кеширования ресурсов и API. Однако мы хотели иметь возможность не только выбирать, что кэшировать, но и когда это делать.

Фактически мы можем кэшировать все результаты вызовов API, но только если мы были уверены, что источник данных каким-либо образом не изменился.

Если вы используете Angular и Typescript, и все наши вызовы данных проходят через RxJ, мы можем создать декоратор Cache Observable, который мы будем использовать только для предоставления возможности кэширования определенным методам.

До:

getCountry(take?: number, skip?: number) {
    return this.http.get(
      `${environment.api}/Country/latest?take=${take}&skip=${skip}`
    );
  }

это станет:

@Cacheable({
    cacheBusterObserver: CountryNotifier
  })
  getCountry(take?: number, skip?: number) {
    return this.http.get(
      `${environment.api}/Country/latest?take=${take}&skip=${skip}`
    );
  }

Обратите внимание, что @Cacheable () был применен только к желаемому нами методу, а также был передан cacheBusterObserver, который в основном является нашим механизмом на основе Subject, чтобы сообщить этому точному декорированному методу, чтобы освободить все его кеши, когда в этом потоке испускается какое-либо значение.

Например, метод ниже будет «перебирать кеш» кешей метода выше, если Observable, который он возвращает, испускает значение

@CacheBuster({
    cacheBusterNotifier: countryNotifier
  })
  saveCountry(id: string, name: string, review: string) {
    return this.http.put(`${environment.api}/Country`, {
      id,
      name,
      review
    });
  }

Это может быть самый сложный пример, но у нас также есть другие конфигурации, такие как maxCacheCount, maxAge, SlidingExpiration и настраиваемые решатели и преобразователи кеша, которые дают нам точный контроль над тем, что, когда и как кэшировать.