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 в VS Code

Настройка Visual Studio Code используя расширение Debugger for Chrome для отладки Angular приложений
03 декабря 2017 г. в Angular

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

RxJS. Delay from array

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);

Angular Resolver

Resolver гарантированно получает асинхронные данные до создания компонента исходя из параметров маршрута.