Javascript RxJS 5 Observable和Angular2 http：调用ajax一次，保存结果，随后的ajax调用使用缓存的结果

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

name.service.ts

@Injectable()
export class NameService {

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

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

@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"
            );
    }
}

@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

@Injectable()
export class NameService {

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

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

@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"
            );
    }
}

@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"
            );
    }
}

name2.component.ts

@Injectable()
export class NameService {

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

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

@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"
            );
    }
}

@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

方法<然后，code>getName将进行ajax调用并返回一个可观察的

接下来，

name2.component.ts

还将调用与

NameService

类相同的

getName

方法，并且

getName

还将执行相同的ajax调用并返回一个可观察的

---

是否可以使用rxjs当

NameService

中的

getName

方法进行第一次ajax调用时，它会存储ajax调用的结果。对

getName

方法的任何后续函数调用都将返回第一个ajax调用的缓存结果，而不会执行另一个冗余ajax

您可以多次订阅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);
    }
}

@Injectable（）
导出类名称服务{
常量nameURL=”http://www.example.com/name";
私有缓存：可观察；
getName（）{
返回this.cache | | this.cache=this.http.get（nameURL）；
}
}

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