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

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

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

要从服务器中刷新数据，请调用

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

构造函数将重新运行。

如果需要，您可以在此处了解更多信息

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

存放Observable并稍后订阅-Angular 7

1 个答案: