Как написать общий CRUD-сервис в Angular и кэшировать данные

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

Абстрактная служба CRUD для победы

Чтобы избежать повторения во всех службах, чтобы иметь только функциональность CRUD, мы можем создать абстрактную службу, которая будет унаследована от.

Теперь создать службу для новой функции нашего приложения, которая должна иметь дело только с операциями CRUD, так же просто, как:

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

Сервис, который мы только что создали, великолепен и прост в использовании во всем нашем приложении, но предположим, что для некоторых частей нашего приложения мы не хотим получать список элементов для нашей текущей функции каждый раз, когда мы перейти на эту страницу. Мы можем улучшить нашу абстрактную службу CRUD, чтобы справиться с этими случаями.

Что мы добавили в нашу предыдущую реализацию:

  • Мы добавили BehaviorSubject для кеширования наших данных, мы собираемся работать с данными из этого объекта и постоянно их обновлять.
  • Мы добавили в конструктор параметр cache, который по умолчанию имеет значение true, когда мы хотим кэшировать данные, мы вызываем api только один раз, чтобы получить все значения, а затем мы собираются вернуть значения, которые мы храним в нашем BehaviorSubject.

Вот и все

Благодаря вышеупомянутой реализации у нас теперь есть CrudService, который можно использовать с любым типом данных из нашего приложения, а также может кэшировать данные.