从嵌套的api调用存储数据-rxjs

Question

我有一个端点，该端点检索帖子的所有评论，并且在该列表中，每个评论都有user_id属性，因此从该端点我可以进行另一个调用来检索用户信息，例如姓名或电子邮件。 这是我使用forkJoin和flatMap实现的。

getCommentsList() {
    return this.http.get("COMMENTS_ENDPOINT")
        .map(res => res.json())
        .flatMap(comments => Observable.forkJoin(comments.map(comment => this.getUserDetail(comment.user_id)
            .map(user => (comment.user = user, comment))))));
}

getUserDetail(id) {
    return this.http.get("USER_ENDPOINT/id")
        .map(res => res.json());
}

尽管这可以正常工作，但是当同一用户发表不止一次评论时，会重复调用用户端点。 当要检索相同的用户数据时，如何存储用户数据并使用它？ 我努力了

storedUsers:any = {};

getUserDetail(id) {
    if (this.storedUsers[id]) {
        console.log("using cache");
        return Observable.of(this.storedUsers[id]);
    }
    return this.http.get("USER_ENDPOINT/id")
        .map(res => res.json())
        .do(user => this.storedUsers[user.id] = user);
}

但是永远不会在控制台中使用缓存记录日志。

Answer 1

我认为这可能是因为未在尝试访问它的级别上定义缓存存储。 您正在调用的函数在this.store所在的级别之外。

尝试将存储传递给回调函数，如下所示：

... => this.getUserDetail(comment.user_id, this.storedUsers)

并使用传递的参考：

getUserDetail(id, storedUsers) {
    if (storedUsers[id]) {
    ...

Answer 2

我认为这实际上是因为在随后调用getUserDetail之前，http请求尚未完成。

我建议您通读此SO问题，以获取有关如何缓存http调用结果的一些想法。

如果将其与storedUsers词典结合使用，则应进行较小的更改即可获得所需的行为。 而不是存储http请求的结果，而是存储缓存的http请求并返回它。

这是一个简短的潜在示例，显示了我要说的内容：

storedUsers:{ [id: number]: Observable<User> } = {};

getUserDetail(id) {
    if (!this.storedUsers[id]) {
        this.storedUsers[id] = this.http.get("USER_ENDPOINT/id")
            .map(res => res.json())
            .shareReplay(1);
    }

    return this.storedUsers[id];
}