使用RxJS的多播observable和缓存操作符来处理此问题。

示例代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private data$: Observable;

  constructor(private http: HttpClient) { }

  getData(): Observable {
    if (!this.data$) {
      this.data$ = this.http.get('data.json').pipe(
        map((data: any) => data.items),
        shareReplay(1)
      );
    }
    return this.data$;
  }
}

在此例中，getData()方法在第一次订阅时会发起HTTP请求，之后的订阅都会使用缓存数据，并且这些订阅共享同一个observable。shareReplay(1)会让HTTP响应值缓存，并在下一次订阅时返回最新的缓存值。