Назначить значение, возвращаемое методом подписки Http в Angular2

Question

У меня проблема, когда я вызываю свой веб-сервис в Angular2. Моя переменная this.arc всегда пуста, потому что функция get() является асинхронной и возвращает переменную непосредственно перед ответом webservice.

Я не знаю, как с этим справиться. Я видел некоторые данные о defer, но я думаю, что это не лучший способ.

Спасибо!

getArcs (lat,lng) { 
    var url = "http://localhost:8081/api/v1/arcs?lat="+lat+"&lng="+lng; 
    this.arcs = []; 

    /*var options = new RequestOptions({ 
     headers: new Headers({ 
      'Content-Type': 'application/json;charset=UTF-8' 
     }) 
    });*/ 

    this.http.get(url) 
    .subscribe(
      (data: any) => { 
       JSON.parse(data._body).forEach(arc => { 
        //console.log(new Arc(arc)); 
        this.arcs.push(new Arc(arc)); //add arcs 
       }); 
       console.log("send"); 

      }, 
      error => { 
       console.log("error during http request"); 
      } 
     ); 
    return this.arcs; 
} 

---- EDIT ----

Я думаю, что проблема в вызове функции:

public getData (lat,lng) { 
    var closedArc = this.arcService.getArcs(lat,lng); 

    console.log(closedArc); 

    //this.showArc(closedArc); 
} 

Answer 1

Поскольку вы действительно нужны данные в вашей getData() функции, вы может переместить логику подписки там, и пусть getArcs() вернет Наблюдаемый. Это хорошая практика - позволить сервисам возвращать Observables и подписываться на них, когда вам нужны данные.

getArcs(lat, lng) { 
    var url = "http://localhost:8081/api/v1/arcs?lat=" + lat + "&lng=" + lng; 

    return this.http 
    .get(url) 
    .map(response => response.json()) // response has builtin method to parse json. 
    .map(arc => { 
     return new Arc(arc); 
    }) 
} 

public getData(lat, lng) { 
    var closedArc; 
    this.arcService 
    .getArcs(lat, lng) 
    .subscribe(
     arcs => closedArc = arcs, // success 
     error => console.log("error during http request"), // error 
    () => this.showArc(closedArc) // complete 
    ) 
}