存储可观察对象并稍后订阅它- Angular 7

Question

我希望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()
  });
}

你对此有什么想法，或者这是可能的吗？observable本身就是一个漂亮整洁的对象，我真的希望能够随意地存储和重建它。

Answer 1

您需要一个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

您可以使用返回可观察对象的构造函数来设置缓存项

将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