网站搜索

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