在服务中缓存数据

时间:2019-06-11 21:39:11

标签: angular rxjs

我一般对rxjs和异步编程都很陌生。

当组件从我的服务请求数据时,如果我还没有数据,我只想打我的API。类似于以下伪代码:

if (!data) {
  data = this.getDataFromApi();
}
return data;

这是您使用C#等语言以同步方式进行操作的方式。基本上,我只需要每个调用一次getDataFromApi()。

我如何在Angular / rxjs中实现相同的目的?

让虐待开始吧。

1 个答案:

答案 0 :(得分:2)

这是缓存数据的方法之一-

export class YourCacheService {

  data: any; //set type of the data as per your app
  constructor() { }

  getData(): Observable<any> {
    //if data exist then simply return the data wrapped in an observable
    if (this.data) {
      return of(data);
    } else {
      //otherwise return the response of the API which will have the data
      //and save the data in this.data 
      return this.getDataFromApi()
                 .pipe(
                   tap(data => {
                    this.data = data;
                    }
                  );
    }
  }
}

yourcacheService.getData()的消费者现在将订阅getData()返回的可观察对象以获取像这样的数据-

yourcacheService.getData()
                  .subscribe(data => {
                    //do whatever you want to do with the data
                  });