存储来自嵌套 api 调用的数据 - rxjs答案

【问题标题】：Storing data from nested api calls - rxjs存储来自嵌套 api 调用的数据 - rxjs
【发布时间】：2018-09-10 13:04:03
【问题描述】：

我有一个端点，可以检索帖子的所有 cmets，并且在该列表中，每个评论都有 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);
}

但从不在控制台中使用缓存记录。

【问题讨论】：

你读过这个 SO 问题吗？ stackoverflow.com/q/36271899/7407935

标签： javascript angular react-native rxjs observable

【解决方案1】：

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

我建议您通读this SO question 以了解有关如何缓存 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];
}

【讨论】：

【解决方案2】：

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

尝试像这样将 store 传递给回调函数：

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

并使用传递的引用：

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

【讨论】：