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

Question

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

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

获取内容

问题:

• 我应该在哪里使用 shareReplay() pipe？内部 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

我会在服务中添加 shareReplay 代码。由于这些参数，您可以创建一个缓存 Observables 的 Map。

这里是 stackblitz我创建是为了演示。