RxJS. Простой кэш HTTP запроса с параметром

Кэш через 2 pipe оператора

  • publishReplay(1) - буфер в одно сообщение. Каждый новый подписчик получит последний результат.
  • refCount() - автоматически вызывет методы connect(), если появляются подписчки и unsubscribe(), когда подписчиков не остаётся.
/** cached data */
private _cache: Observable<WhateverResponse>;

...

getData(): Observable<WhateverResponse> {
    if (!this._cache) {
        this._cache = this._http.get('url').pipe(
            publishReplay(1),
            refCount()
        );
    }
    return this._cache;
}  

Для хранения кэша отдельных запросов предлагается использовать Map с ключами, которые являются параметрами запросов. Если используется объект параметров, то лучше его сериализовать в строку, из-за того, что объекты сравниваются по ссылке. Пример

{ a: '1'} == { a: '1' } // вернёт false
JSON.stringify({ a: '1'}) === JSON.stringify({ a: '1' } ) // вернёт true

Пример реализации:

/** http cache map */
private _instanceCache = new Map<string, Observable<TProductInstanceListResponse>>();

...

/**
 * Product instance list
 */
getInstanceList(params: EntityListParams = {}): Observable<TProductInstanceListResponse> {
    const key = JSON.stringify(params);
    if (!this._instanceCache.has(key)) {
      const response = this._http.get('instance', params).pipe(
        publishReplay(1),
        refCount()
      );
      this._instanceCache.set(key, response);
    }
    return this._instanceCache.get(key);
}

Для более сложных случаев рекомендуется библиотека cashew


Похожие записи

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

07 января 2019 г. в Angular

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).

05 января 2019 г. в Angular