如何使用 shareReplay 缓存带有请求参数的 HTTP 响应

Question

我有一个场景，比如我需要在单击文件时获取文件内容。我想用shareReplay()缓存文件内容API，如何实现？

fileService.getContent 是一项 API 服务，它将使用 params(repository_id, filePath);

获取内容

问题：

我应该在哪里使用 shareReplay() 管道？内部 API 服务？或者我在下面写的地方。
下面的代码没有按预期工作。 API 将被多次触发。我如何使用 shareReplay() 缓存 API 以仅调用一次。

组件

`

fileOpened$ = new Subject();
...

this.fileOpened$.pipe(
    switchMap(file => this.fileService.getContent(this.repository_id, file.filePath)),
    shareReplay(1)
);

`

服务:

`

getContent(repoId: string, path: string): Observable<string> {
    return this.http.get<string>(
        `/api/xxx/${repoId}/files/${decodeURIComponent(path)}`,
        {
            responseType: 'text' as 'json'
        });
}

`

Answer 1

服务的主要内容是创建一个可共享的代码。在某个地方，您可能总是需要来自 api 的新结果，对吗？最好在你的组件中有 shareReplace 。在您希望它为您提供重播的地方。如果您确定此服务方法不会在其他任何地方使用。放在任何一边都不会产生任何影响。

Answer 2

我会在服务中添加 shareReplay 代码。由于这些参数，您可以创建一个缓存可观察对象的地图。

这里是我创建的stackblitz来演示。

如何使用 shareReplay 缓存带有请求参数的 HTTP 响应

How to use shareReplay for cache HTTP response with request params

angular

rxjs6

rxjs-observables