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

Question

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

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会先调用NameServiceclass的getName方法。 getName 然后将进行 ajax 调用和 return 可观察。

接下来，name2.component.ts也会调用NameServiceclass相同的getName方法，getName也会执行相同的[=51] =] 调用并 return 一个可观察对象。

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

Answer 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);
    }
}

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

RxJS 5 Observable and Angular2 http: Call ajax once, save the result, and subsequent ajax calls use cached result

javascript

ajax

rxjs5

angular