В современном мире, управляемом данными, веб-приложения часто в значительной степени полагаются на вызовы API для получения информации с серверов. Однако частые вызовы API для общих данных могут привести к ненужному сетевому трафику и замедлению работы пользователей. Вот тут-то и приходят на помощь RXJS и оператор Share Replay.

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

Как это работает:

Когда вы применяете оператор shareReplay к наблюдаемому потоку, он создает «общее» соединение с исходным наблюдаемым. Как только наблюдаемый источник выдает значение, shareReplay кэширует это значение и немедленно воспроизводит его всем активным подписчикам. Последующие подписчики получат кешированное значение вместо того, чтобы инициировать новые запросы к наблюдаемому источнику.

Но…. КАК?

Конечно, вам нужно импортировать оператор shareReplay..

import { of } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

Примените его к наблюдаемому потоку с помощью метода pipe:

const myObservable = of('Data from API').pipe(shareReplay());

Вы используете Angular? Вот пример:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

interface Country {
  name: string;
  capital: string;
  population: number;
}

@Injectable({
  providedIn: 'root'
})
export class CountryService {

  private countries$: Observable<Country[]>;

  constructor(private http: HttpClient) { }

  getCountries(): Observable<Country[]> {
    this.countries$ = this.countries$ ?? this.fetchCountries().pipe(shareReplay());
    return this.countries$;
  }

  private fetchCountries(): Observable<Country[]> {
    const apiUrl = 'https://imaworldwidecountrylisturl/';
    return this.http.get<Country[]>(apiUrl).pipe(
      map((response) => response as Country[])
    );
  }
}

Использование таких методов, как кэширование и совместное использование наблюдаемых данных в сервисах Angular, может принести вашему приложению несколько преимуществ:

  • Сокращение количества вызовов API: когда вы используете shareReplay в наблюдаемом объекте, данные, полученные из API, сохраняются в памяти и передаются подписчикам.
  • Согласованность между компонентами: когда нескольким компонентам требуется доступ к одним и тем же данным из API, использование общего наблюдаемого объекта в службе гарантирует, что все они получат одни и те же данные.
  • Повышенная скорость отклика: кэширование данных в памяти с помощью shareReplay означает, что последующие запросы на те же данные могут быть обработаны мгновенно, не дожидаясь ответа API.