angular - 如何在 Angular 服务中正确检索和缓存数据

Question

经常，在 Angular 应用程序中，我有一些服务，需要通过 http 请求检索一些数据，并通过 BehaviorSubject 将其共享给消费者。它有这样的实现:

class Service { 

  private data = new BehaviorSubject();

  getData() {
    if (!this.data.getValue()) {
      anyHttpCall().subscribe(res => this.data.next(res));
    }

    return this.data.asObservable();
  } 
}

这种方法的主要原理是当应用程序的某些组件在没有值的情况下同时调用 getData() 时，它会触发多个 http 调用和数据发出，所以我找到了两种方法来防止它:

1)存储关于请求状态的 bool 变量

class Service { 

  private data = new BehaviorSubject();   

  private pendingResult = false;

  getData() {
    if (!this.data.value && !this.pendingResult) {
      this.pendingResult = true;
      anyHttpCall().subscribe(res =>   {
        this.data.next(res);
        this.pendingResult = false;
      }
    }

    return this.data.asObservable();
  } 
}

2)在服务构造函数中获取数据

class Service { 

  private data = new BehaviorSubject();  

  constructor() {
    anyHttpCall().subscribe(resthis.data.next(res));
  }

  getData() {
    return this.data.asObservable();
  } 
}

那么哪种方法最好，为什么

Answer 1

最好的方法是使用 rxjs shareReplay。该运算符返回一个 Observable，该 Observable 共享对底层源的单个订阅。换句话说，使我们的观察变热。

const CACHE_SIZE = 1;
class Service { 

  private _data$: Observable<YourType>;

  get data(): Observable<YourType> {
    if (!this._data$) {
      this._data$ = anyHttpCall()
        .pipe(shareReplay({ refCount: true, bufferSize: CACHE_SIZE })
      );
    }
    return this._data$;
  }
}

bufferSize 决定重放缓冲区的最大元素数，即为每个订阅者缓存和重放的元素数。

这篇文章很好地解释了这一点:https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html