ajax和rxjs,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);

}

}

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.

最佳答案 您可以多次订阅Observable,因此,如果您只想保存第二个网络请求以便在两个组件之间共享数据,您可以将其缓存在您的服务中,如下所示：@Injectable()

export class NameService {

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

private cache: Observable;

getName() {

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

}

}