订阅数据服务中保存的可观察数据

Question

我有一个 ionic 4 应用程序，它可以从端点检索故障。我想将数据保存在服务上的属性中。

所以我可以在多个屏幕上访问列表，这也意味着每次加载第一个屏幕时我不必重新加载列表

我的故障服务如下。我调用 updateFaults 检索故障并将它们存储在 this.faults.

export class FaultsService {

  private selectedFault: Fault;
  public faults: Fault[];

    constructor(private http: HttpClient) {}

   updateFaults() {
       this.http.get<Fault[]>('/api/faults').subscribe((data: any) =>
       {
         this.faults = data.data
       })
    }

    getFaultObservable() : Observable<Fault[]>
    {
      return of(this.faults)
    }

}

在我的页面 ngOnInit 我有这个方法 :

ngOnInit() {
    this.faultsService.getFaultObservable().subscribe((faults: Fault[]) =>{
        console.log('update faults')
      this.faults = faults
      }
    )

但是当我加载页面时，虽然没有报错。什么都不显示， console.log 也没有触发。所以我不确定我是否正确订阅了。

Answer 1

这可能是更好的方法，这样您就不必调用更新。您可以只缓存第一次，然后 return 每次都缓存。我添加了一个无效缓存，以防你有时想这样做。

export class FaultsService {

  private selectedFault: Fault;
  private faults: Fault[];

    constructor(private http: HttpClient) {}

    getFaultObservable() : Observable<Fault[]>
    {
      if(this.faults) {
          return of(this.faults)
      }


      return this.http.get<Fault[]>('/api/faults').pipe(
   tap(data => this.faults = data.data)
      )
    }

    invalidateCache() {
       this.faults = null;
    }

}

Answer 2

该服务可以缓存检索到的项目，然后 return 使用 of. The service itself can cache the result of the call using tap.

将这些项目缓存到包含在可观察对象中的任何后续调用

您应该将缓存从调用者中抽象出来，以便将检索保留为 1 个方法。调用者然后调用 getFaults() 并订阅 returned 可观察对象。对来电者来说是第1次还是第10次都无所谓

import { map, tap } from 'rxjs/operators';
import { of } from 'rxjs';

export class FaultsService {

  faults: Fault[];

  constructor(private http: HttpClient) {}

  getFaults() : Observable<Fault[]> {
    return this.faults
        ? of(this.faults)
        : this.http.get<{data: Fault[]}>('/api/faults')
              .pipe(tap((data) => this.faults = data.data) // cache
                  , map((data) => data.data)); // return just Fault[] from data.data to the subscriber
    }
}

订阅数据服务中保存的可观察数据

Subscribe to observable data held in dataservice

observable

rxjs

ionic-framework

angular

ionic4