javascript - angular2 使用 Observable(Http) 工作而不重新加载
我有一个 PartnersService,在构造函数中从服务器加载合作伙伴数组列表。
this.partners = this._http.get('/app/partners/partners.data.json')
.map(this.extractData)
.catch(this.handleError);
当我得到合作伙伴列表时,一切正常。但我需要通过ID获取合作伙伴。在这种情况下,我使用带回调的函数
getPartner(id:number, callback:(partner:Partner)=>void):void {
this.partners.subscribe(partners=> {
for (let partner of partners) {
if (partner.id == id) {
callback(partner);
}
}
});
}
在浏览器控制台,我看到每次调用 subscribe 时,angular2 都会向服务器发送请求。我能做些什么,以避免每次都发送请求吗?或者是否有更好的方式来创建 getPartner() 函数(不使用回调)?
答案#1
你可以尝试类似这样的方式:
getPartners() {
if (this.partners) {
return Observable.of(this.partners);
} else {
return this._http.get('/app/partners/partners.data.json')
.map(this.extractData)
.catch(this.handleError)
.do(partners => {
this.partners = partners;
});
}
}
getPartner(id:number):Observable<partner> {
this.getPartners().map(partners => {
return partners.find(partner => (partner.id == id));
});
}
并以这种方式执行该方法:
this.service.getPartner('some id').subscribe(partner => {
console.log(partner);
});
答案#2
你也可以使用 publishLast() 来捕获事件。
constructor() {
this.partners = this._http.get('/app/partners/partners.data.json')
.map(this.extractData)
.catch(this.handleError)
//shares the subscription with all observers so you don't get repeated
//calls and caches the result.
.publishLast();
//Initiates the http call
this.connection = this.partners.connect();
}
getPartner(id:number):Observable<partner> {
return this.partners
//Convert Observable<partner[]> to Observable<partner>
.flatMap(x => x)
.filter(p => p.id === id);
}
