存储Observable并在以后订阅它 - Angular 7

Question

我希望Angular 7客户端能够定期离线数小时。

已连接：通常使用observable处理HTTP请求。没有连接：将observable存储在某处，以便稍后在重新建立连接时订阅它。

为简洁起见，此代码精简：

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

对此有任何想法，甚至可能吗？可观察物本身是一个很好的整洁物体，我真的希望能够随意存储和重建它。

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

您可以使用返回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