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

该服务可以缓存检索到的项目，然后将这些项目返回到使用of包裹在可观察对象中的任何后续调用。服务本身可以使用tap缓存调用结果。

您应保留从调用方提取的缓存，因此将检索保留为1方法。然后，调用者调用getFaults()并订阅返回的observable。就呼叫者而言，这是第一次还是第十次都没关系。

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
    }
}

Answer 2

这可能是一个更好的方法，因此您不必致电更新。您可以只进行第一次缓存，然后每隔一段时间返回一次缓存。我添加了一个无效缓存，以防您有时想要这样做。

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

}

订阅dataservice中保存的可观察数据

2 个答案: