Observable сервисы в Angular

Всем привет, меня зовут Владимир. Я занимаюсь фронтенд разработкой в Tinkoff.ru.

В Ангуляре для передачи данных внутри приложения или для инкапсуляции бизнес-логики мы привыкли использовать сервисы. Для управления асинхронными потоками отлично подходит RxJS.

Ангуляр в сочетании с RxJS позволяет писать в декларативном стиле, коротко и ясно. Но иногда мы сталкиваемся со сторонними библиотеками или API, которые используют коллбэки, промисы, тем самым подталкивают нас отступить от привычного стиля и писать императивно.

Цель статьи — показать на примере подобных API, как с помощью RxJS их можно без проблем обернуть в Observable-сервисы. Это поможет достичь удобства использования в Ангуляре. Начнем с Geolocation API.

Geolocation API

Geolocation API позволяет пользователю предоставлять свое местоположение веб-приложению, если пользователь согласится на это. Из соображений конфиденциальности у пользователя будет запрошено разрешение на предоставление информации о местоположении.

Ниже показан пример базового использования нативного Geolocation API.

Сначала необходимо убедиться, что Geolocation поддерживается браузером:

if('geolocation' in navigator) {  /* geolocation is available */  } else {  /* geolocation IS NOT available */  }

Затем на помощь приходит метод getCurrentPosition(), который единожды передает позицию пользователя. Метод watchPosition(), в свою очередь, позволит отслеживать позицию пользователя в течение определенного времени. Эти методы принимают коллбэки, которые обработают результат в случае получения данных или при возникновении ошибки.

... success(position) {  doSomething(position.coords.latitude, position.coords.longitude); }   error() {  alert('Sorry, no position available.'); }   watch() {  this.watchID = navigator.geolocation.watchPosition(this.success, this.error); }  stopWatch() {   navigator.geolocation.clearWatch(this.watchID); } ...

Если необходимо отследить позицию пользователя в течение какого-то времени, по окончании важно не забыть вызвать метод clearWatch() с id наблюдателя за местоположением. Оставленный наблюдатель увеличивает потребление энергии устройством. Но такой базовый вариант неудобен для использования в Ангуляре. Давайте разберемся, как это исправить с помощью RxJS Observable.

Сначала создадим токен для получения объекта Geolocation, чтобы не использовать глобальный объект напрямую. В дальнейшем это облегчит тестирование и сделает возможным запуск на стороне сервера. Для этой цели воспользуемся токеном NAVIGATOR пакета @ng-web-apis/common.

export const GEOLOCATION = new InjectionToken<Geolocation>(    'An abstraction over window.navigator.geolocation object',    {        factory: () => inject(NAVIGATOR).geolocation,    }, );

Также понадобится токен, с помощью которого проверим поддержку браузером Geolocation API:

export const GEOLOCATION_SUPPORT = new InjectionToken<boolean>(    'Is Geolocation API supported?',    {        factory: () => !!inject(GEOLOCATION),    }, );

И еще один токен для передачи PositionOptions:

import {InjectionToken} from '@angular/core';  export const POSITION_OPTIONS = new InjectionToken<PositionOptions>(    'Token for an additional position options',    {factory: () => ({})}, );

Наконец пришло время создать сервис! Observable поможет добиться простоты его использования.

Постоянно работая с Observable, часто забывают, что это обычный класс, от которого можно наследоваться. Конструктор его класса принимает в качестве аргумента функцию, которая вызывается в момент подписки. Эта функция предоставляет объект Subscriber, который в свою очередь передает значения подписчикам, уведомляет об успешном завершении или прерывает поток с ошибкой с помощью методов next(), complete() и error(). Посмотрим, как это выглядит:

@Injectable({    providedIn: 'root', }) export class GeolocationService extends Observable<Position> {    constructor(        @Inject(GEOLOCATION) geolocationRef: Geolocation) {         super(subscriber => {             geolocationRef.watchPosition(                position => subscriber.next(position),                positionError => subscriber.error(positionError),            );        });    } }

Следующим шагом добавим проверку поддержки браузера и опции в конструктор сервиса:

@Injectable({    providedIn: 'root', }) export class GeolocationService extends Observable<Position> {   constructor(   @Inject(GEOLOCATION) geolocationRef: Geolocation,   @Inject(GEOLOCATION_SUPPORT) geolocationSupported: boolean,   @Inject(POSITION_OPTIONS) positionOptions: PositionOptions, ) {   super(subscriber => {     if (!geolocationSupported) {       subscriber.error('Geolocation is not supported in your browser');     }      geolocationRef.watchPosition(       position => subscriber.next(position),       positionError => subscriber.error(positionError),       positionOptions,     );    })   } }

Финишная прямая! Поскольку сервис наследуется от класса Observable, у него есть метод pipe(). Теперь появилась возможность применять цепочку RxJS-операторов непосредственно к нашему сервису. Чтобы при множественных подписках функция внутри конструктора выполнялась только раз, а ее результат распространялся на всех подписчиков, используем RxJS-оператор shareReplay().
Почему не share()? К сожалению, в нативном Geolocation API одновременный вызов getCurrentPosition() и watchPosition() приводит к неожиданному поведению и возможной ошибке Timeout expired. Оператор shareReplay() решит проблему, повторив последние значения наблюдателя геопозиции для новых подписчиков, что позволит одновременно отслеживать текущую геопозицию в одном месте и получать ее единоразово в другом. Передаем в него опции {bufferSize: 1, refCount: true}, чтобы работал механизм подсчета количества подписчиков. Для автоматического вызова clearWatch()-метода, когда отписывается последний подписчик, используем RxJS-оператор finalize():

@Injectable({    providedIn: 'root', }) export class GeolocationService extends Observable<Position> {    constructor(        @Inject(GEOLOCATION) geolocationRef: Geolocation,        @Inject(GEOLOCATION_SUPPORT) geolocationSupported: boolean,        @Inject(POSITION_OPTIONS)        positionOptions: PositionOptions,    ) {        let watchPositionId = 0;         super(subscriber => {            if (!geolocationSupported) {                subscriber.error('Geolocation is not supported in your browser');            }             watchPositionId = geolocationRef.watchPosition(                position => subscriber.next(position),                positionError => subscriber.error(positionError),                positionOptions,            );        });         return this.pipe(            finalize(() => geolocationRef.clearWatch(watchPositionId)),            shareReplay({bufferSize: 1, refCount: true}),        );    } }

Сервис готов! Использовать его в компонентах просто и удобно, взгляните на пример ниже:

... constructor(@Inject(GeolocationService) private readonly position$: Observable<Position>) {} ...    position$.pipe(take(1)).subscribe(position => doSomethingWithPosition(position)); ...

Можно также передавать позицию напрямую в шаблон, используя async pipe. Это отлично сочетается с @angular/google-maps или любым другим кастомным компонентом карты.

<app-map        [position]="position$ | async" ></app-map>

Больше не стоит беспокоиться об удалении наблюдателя и можно пользоваться возможностями RxJS при работе с геолокацией.

Мы рассмотрели создание наблюдаемого сервиса на примере Geolocation API. Полный код данного решения смотрите здесь. Он готов к использованию и опубликован в npm.

Не будем останавливаться на этом и на примере ResizeObserver API посмотрим, как наблюдаемые сервисы можно с легкостью обернуть в директивы.

ResizeObserver API

API Resize Observer предоставляет эффективный механизм, с помощью которого приложение может отслеживать элемент на предмет изменения его размера.

Как и Geolocation API, нативный ResizeObserver API неудобен для использования в Ангуляре. Но мы можем обернуть его в Observable-сервис. Не буду снова подробно описывать, как это сделать. Это похоже на сервис, который написан выше, взгляните на код:

@Injectable() export class ResizeObserverService extends Observable<    ReadonlyArray<ResizeObserverEntry> > {    constructor(        @Inject(ElementRef) {nativeElement}: ElementRef<Element>,        @Inject(NgZone) ngZone: NgZone,        @Inject(RESIZE_OBSERVER_SUPPORT) support: boolean,        @Inject(RESIZE_OPTION_BOX) box: ResizeObserverOptions['box'],    ) {        let observer: ResizeObserver;         super(subscriber => {            if (!support) {                subscriber.error('ResizeObserver is not supported in your browser');            }             observer = new ResizeObserver(entries => {                ngZone.run(() => {                    subscriber.next(entries);                });            });            observer.observe(nativeElement, {box});        });         return this.pipe(            finalize(() => observer.disconnect()),            share(),        );    } }

В новой версии Ангуляра зона сама реагирует на ResizeObserver. Мы обернули вызов next() в ngZone() только для поддержки старых версий Ангуляра.

Единственное значительное отличие от Geolocation-сервиса заключается в том, что в конструкторе внедрен ElementRef. Это нужно, чтобы передать ссылку на наблюдаемый элемент в метод observe(). Теперь появилась возможность использовать сервис напрямую из нашего компонента. Механизм Dependency Injection позаботится о том, чтобы передать ссылку на нативный элемент в сервис.

Чтобы сервис стал удобнее в использовании, обернем его в директиву. Сделать сделать очень просто. Необходимо внедрить сервис в конструкторе директивы и направить его значения в Output(), как показано ниже:

@Directive({    selector: '[waResizeObserver]',    providers: [        ResizeObserverService,        {            provide: RESIZE_OPTION_BOX,            deps: [[new Attribute('waResizeBox')]],            useFactory: boxFactory,        },    ], }) export class ResizeObserverDirective {    @Output()    readonly waResizeObserver: Observable<ResizeObserverEntry[]>;     constructor(        @Inject(ResizeObserverService)        entries$: Observable<ResizeObserverEntry[]>    ) {        this.waResizeObserver = entries$;    } }

Здесь стоит обратить внимание на то, как RESIZE_OPTION_BOX добавлены в провайдеры директивы. Использование такой конструкции позволит указывать опции ReziseObserver прямо из шаблона или получать дефолтное значение с помощью фабрики.

Директива готова. Посмотрим, как просто ее использовать в компонентах:

<div        waResizeBox="content-box"        (waResizeObserver)="onResize($event)"    >        Resizable box </div>

...    onResize(entry: ResizeObserverEntry[]) {        // do something with entry    } ...

Это решение также оформлено в крошечную open-source-библиотеку, которая доступна на npm. Посмотреть весь код можно на «Гитхабе».

Заключение

Рассмотренные методы позволяют использовать полный арсенал RxJS и Dependency Injection даже с библиотеками и API, не заточенными под Ангуляр. Также они помогут оградить компоненты от излишней логики. Если нужно работать уже с существующими потоками или промисами, альтернативный способ — создание токена с фабрикой, как это сделано в @ng-web-apis/midi. Подробнее об этом можно почитать здесь.

Надеюсь, идеи этой статьи помогут в создании простых и удобных сервисов.

Примеры, рассмотренные в статье, являются частью большого проекта под названием Web APIs for Angular. Наша цель — создание легковесных качественных оберток для использования нативного API в Angular-приложениях. Так что, если вам нужен, к примеру, Payment Request API или Intersection Observer, — посмотрите все наши релизы.