Angular Http 缓存和竞争条件

Question

我正在尝试弄清楚如何以最简单的方式最好地解决我的应用程序中的竞争条件。

我有一条路线有两个解析器。解析器是：

GetBooksResolver

GetAuthorsResolver

现在，Authors 和 Books 都有一个类型 Genre 需要合并。

因此在两个解析器中，您都有一个 forkJoin：

// GetBooksResolver:
forkJoin(this.http.get('api/genres'), this.http.get('api/books'))
    .pipe(map(data => //merge datasets));

//GetAuthorsResolver
forkJoin(this.http.get('api/genres'), this.http.get('api/authors'))
    .pipe(map(data => //merge datasets));

我有一个简单的 HTTP 缓存服务，可以正确地防止 HTTP 请求再次触发，但是初始竞争条件仍然存在。

因此，您看到 两个不同的 api/genre 调用

有什么方法可以设置缓存拦截器以防止这种情况发生？

Answer 1

正如评论中已经建议的那样，您可以创建一个调用服务 return 重播 Observable 的方法，如下所示：

public getGenres(): Observable<Genre> {
  return this.httpClient.get('api/genres').pipe(
    shareReplay(1)
  );
}

然后你调用这个方法来获取回放Observable并在两个 forkJoin 方法中使用它：

const genres$ = this.getGenres();
// GetBooksResolver:
forkJoin(genres$, this.http.get('api/books'))
    .pipe(map(data => //merge datasets));

//GetAuthorsResolver
forkJoin(genres$, this.http.get('api/authors'))
    .pipe(map(data => //merge datasets));

我还创建了一个工作 StackBlitz 示例，以便您可以看到它的实际效果。

Angular Http 缓存和竞争条件

Angular Http Caching and Race Conditions

angular

angular-httpclient