В современном мире, управляемом данными, веб-приложения часто в значительной степени полагаются на вызовы 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.