RxJS 5 Observable and Angular2 http：调用ajax一次，保存结果，后续ajax调用使用缓存结果答案

【问题标题】：RxJS 5 Observable and Angular2 http: Call ajax once, save the result, and subsequent ajax calls use cached resultRxJS 5 Observable and Angular2 http：调用ajax一次，保存结果，后续ajax调用使用缓存结果
【发布时间】：2017-05-23 21:45:36
【问题描述】：

下面的代码是我目前拥有的简化版本：

name.service.ts

@Injectable()
export class NameService {

    const nameURL = "http://www.example.com/name";

    getName() {
        return this.http.get(nameURL);
    }
}

name1.component.ts

@Component({
    templateUrl: './name1.component.html',
    styleUrls: ['./name1.component.css']
})
export class Name1Component implmenets OnInit {

    private name1;

    constructor(
        private nameService: NameService
    ){}

    ngOnInit() {
        this.setupName();
    }

    private setupName() {

        this.nameService.getName()
            .subscribe(
                resp => this.name1 = resp,
                error => this.name1 = "unknown"
            );
    }
}

name2.component.ts

@Component({
    templateUrl: './name2.component.html',
    styleUrls: ['./name2.component.css']
})
export class Name2Component implmenets OnInit {

    private name2;

    constructor(
        private nameService: NameService
    ){}

    ngOnInit() {
        this.setupName();
    }

    private setupName() {

        this.nameService.getName()
            .subscribe(
                resp => this.name2 = resp,
                error => this.name2 = "unknown"
            );
    }
}

这里是我想做的，name1.component.ts会先调用NameService类的getName方法。 getName 然后会进行 ajax 调用并返回一个 observable。

接下来，name2.component.ts 还将调用 NameService 类的相同 getName 方法，getName 还将执行相同的 ajax 调用并返回一个 observable。

是否可以使用 rxjs 当NameService 中的getName 方法进行第一次ajax 调用时，它会存储ajax 调用的结果。对getName 方法的任何后续函数调用将改为返回第一个ajax 调用的缓存结果，而不执行另一个冗余ajax。

【问题讨论】：

尝试将这些值保存在浏览器的本地存储中。如果值不存在，首先检查 localstorage 调用服务器，否则从 localstorage 中检索并使用它
你可以。这是链接：syntaxsuccess.com/viewarticle/…
@rashfmnb 我更喜欢 rxjs 解决方案。
@IgorJanković 我阅读了您分享的链接并尝试在我的代码中实现它。但它不起作用。我仍然看到浏览器中发出了 2 个网络请求，而不是 1 个。
查看这个答案stackoverflow.com/questions/36271899/…

标签： javascript ajax angular rxjs5

【解决方案1】：

您可以多次订阅 Observable，因此如果您只想保存第二个网络请求以获取两个组件之间共享的数据，您可以将其缓存在您的服务中，如下所示：

@Injectable()
export class NameService {

    const nameURL = "http://www.example.com/name";
    private cache: Observable<any>;

    getName() {
        return this.cache || this.cache = this.http.get(nameURL);
    }
}

【讨论】：