Магазин Observable и подписаться на него позже - Angular 7 - PullRequest
Новая
       12

Магазин Observable и подписаться на него позже - Angular 7

1 голос
/ 03 апреля 2019

Я ожидаю, что клиент Angular 7 будет регулярно находиться в автономном режиме в течение нескольких часов.

Подключено: обрабатывает HTTP-запросы, как правило, с использованием наблюдаемых. Нет соединения: сохраните наблюдаемое где-нибудь, чтобы я мог подписаться на него позже, когда соединение будет восстановлено.

Этот код для краткости сжат: 

let someObservable = this.service.returnAnObservable();

if (isOnline) {
  // fire off the HTTP request and handle it
  someObservable.subscribe(... stuff ...);
} else {
  *** store the observable somewhere ***
}

// track when network is back online
this.network.connectionChanged.subscribe(backOnline => {
  if (backOnline) this.synchronize();
});

private synchronize(): void {
  let observables = ** get the observables out of storage **
  observables.forEach(ob => {
    // let attempt = new Observable(JSON.parse(ob));
    // let another = ob as Observable<any>;
    // let isThisPossible = <Observable<any>>JSON.parse(ob);

    // however the Observable is reconstructed, subscribe to it
    observable.subscribe()
  });
}

Есть идеи по этому поводу или это вообще возможно? Само наблюдаемое - хороший аккуратный объект, я действительно хотел бы иметь возможность хранить и восстанавливать его по своему желанию.

1 Ответ

0 голосов
/ 03 апреля 2019

Вы хотите BehaviorSubject, это тип наблюдаемого, который сохраняет последнее испущенное значение. 

const { BehaviorSubject } = rxjs;

const bs$ = new BehaviorSubject('initial value');

bs$.subscribe(val => { console.log(`First sub ${val}`); });

bs$.next('New value');

bs$.subscribe(val => { console.log(`Second sub ${val}`); });

bs$.next('Another value');
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>

Посмотрите, как значение все еще доступно до следующего выброса.

Вы можете взглянуть на мою библиотеку ngx-rxcache

https://github.com/adriandavidbrand/ngx-rxcache

Вы можете настроить элемент кэша с помощью функции конструктора, которая возвращает Observable

Вставьте cacheService в ваш конструктор 

constructor(private cache: RxCacheService) { }

const cacheItem = this.cache.get({
  id: 'Some unique id',
  construct: () => this.http.get('Your data endpoint'),
  autoload: true
});

autoload: true запустит функцию конструктора при первом обращении к данным, load: true сразу же запустит ее, поэтому данные уже загружены при первом доступе

Вы можете подписаться на обновления с помощью 

cacheItem.value$.subscribe(val => { doStuffWithVal(val); });

или просто загляните в кеш, чтобы увидеть последнее значение 

doStuffWithVal(cacheItem.value);

Для обновления данных с сервера вы звоните load 

this.network.connectionChanged.subscribe(backOnline => {
  if (backOnline) this.cacheItem.load();
});

И функция конструктора будет перезапущена.

Вы можете прочитать об этом здесь, если хотите

https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

...