Простое кэширование с помощью Rxjs

Кэширование — одна из самых важных вещей, которую нужно изучить в любом фреймворке.

Сегодня я объясню лучший и самый простой способ, который я нашел, чтобы кэшировать ответ API, где бы вы ни находились (локальное хранилище, память, файлы cookie и т. д.), используя Rxjs.

Этот способ работает с React, Vue, Angular или любым другим фреймворком.

1-Создать службу API

Сервисы API — отличный способ содержать все ваши вызовы API (если вы используете Angular, я думаю, он у вас уже есть).

В Angular у вас будет

Для любого другого фреймворка

вам необходимо установить следующие библиотеки, если они у вас еще не установлены.

$ npm install axios rxjs axios-observable

и создайте свой сервис API следующим образом.

Примечание. Если вы не понимаете, вы можете прочитать мою предыдущую статью.

Службы API в React или Vue с использованием Rxjs
— объяснениеtowardsdev.com

2-Выполните кэширование

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

1-импортировать следующие операторы filter, startWith, tap
из rxjs/operators.

2-добавьте их в свой вызов API, используя pipe().
Для Angular

Для любой другой платформы

поздравляю. вот и все 🥳🥳🥳…

Объяснение

Здесь мы используем три оператора..

1. **коснитесь**
Используется, если вы хотите прозрачно выполнять действия или побочные эффекты, например ведение журнала.

2. **startWith**
Используется, когда вы хотите передать значение перед любыми выбросами из источника.

3. **фильтр**
Используется, если вы хотите отфильтровать выбросы из источника.

почему мы их используем?

мы используем `tap` для сохранения успешного ответа API в `Localstorage`.

мы используем `startWith` для выдачи кэшированного значения до того, как эмиссии поступят из источника, и мы добавляем `localStorage[‘chash_key’] || ‘{}’` для выдачи пустого объекта в случае, если хранилище кеша пусто.

мы используем `filter` для фильтрации окончательных выбросов, поэтому, если хранилище кеша пусто и оператор `startWith` возвращает пустой объект, `filter` заблокирует его.

Если мы не добавим `filter`, мы можем получить ошибки во внешнем интерфейсе.

Примечание.кстати, если вы получаете необработанный массив из API, например `[]`, вы можете сделать `startWith(JSON.parse(localStorage[‘chash_key’] || ‘[]’))` и удалить оператор `filter`.

Вы можете остановиться здесь, если хотите. Сейчас объясню, как кешировать в памяти:

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

1-объявите частный тип переменной `any` в вашем классе
2-сохраните API res в этой переменной, используя оператор `tap`.

ваш код будет похож

Для углового

Для любой другой платформы

Конец…

Теперь, если вы попытаетесь получить данные в первый раз, ваш успешный ответ будет кэширован и использован для следующей выборки.