angular - 如何在 Angular 服务中存储从 api 接收的数据并避免多次 api 调用？

Question

我正在使用 Angular (v6) 服务从后端获取数据并将其存储在变量中。我只想调用 api 一次，并在不同组件需要时提供数据。

问题是我从不同的组件调用服务中的 getPlans() 函数来获取数据，并且对于每个调用，我在浏览器的网络选项卡中看到一个 api 调用。

如何避免每次调用 getPlans() 函数时都调用并提供调用 api 一次的数据并将其存储到变量中？

export class PlansService {
  private plansData:any = {};

  constructor(private httpCallService: HttpCallService, private http: HttpClient) { 

    this.plansData = this.httpCallService.getHttpResponse("GET_PLANS");

  }
  getPlans(): Observable<any>{
    return this.plansData;
   }

}

Answer 1

这可以通过 RxJs 的 shareReplay() 来完成。根据Changelog ,

shareReplay returns an observable that is the source multicasted over a ReplaySubject. That replay subject is recycled on error from the source, but not on completion of the source. This makes shareReplay ideal for handling things like caching AJAX results, as it's retryable. It's repeat behavior, however, differs from share in that it will not repeat the source observable, rather it will repeat the source observable's values.

这使得 shareReplay() 的用户非常适合您的用例。

请记住在您的服务上也导入 shareReplay()。

import { shareReplay } from 'rxjs/operators';
.
.

export class PlansService {
  private plansData: Observable<any>;

  constructor(private httpCallService: HttpCallService, private http: HttpClient) { 

    this.plansData = this.httpCallService.getHttpResponse("GET_PLANS")
      .pipe(
        shareReplay()
      );

  }

  getPlans(): Observable<any>{
    return this.plansData;
   }

}

然后，您可以在需要它的组件上返回可观察量，并且如果您查看“检查元素”工具上的网络请求选项卡，则不会触发其他 HTTP 请求，因为每次都会返回带有缓存值的可观察量getPlans() 被调用。