Wie greife ich nach einem asynchronen HTTP-Aufruf ordnungsgemäß auf Daten von einem Angular Observable zu?

So geben Sie eine Antwort von einem Observable/HTTP/Async-Aufruf in Angular zurück

Problem:

Ein Observable gibt zurück Daten über einen asynchronen Aufruf, aber der Zugriff auf die Daten führt aufgrund der asynchronen Natur der Daten zu undefinierten Ergebnissen Betrieb.

Service:

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}</any>

Komponente:

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}

Grund:

Asynchrone Vorgänge benötigen Zeit zum Abschluss, aber JavaScript führt synchronen Code sofort aus. console.log(this.myEvents); wird ausgeführt, bevor die Daten vom Server empfangen werden.

Lösung:

Verwenden Sie den Subscribe-Callback, um die Antwort zu verarbeiten, sobald sie eintrifft:

this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //<p><strong>Fazit:</strong></p><p>Verarbeiten Sie asynchrone Vorgänge innerhalb von Rückrufen oder abonnieren Sie Funktionen, um auf Daten zuzugreifen nachdem es empfangen wurde. Dadurch wird sichergestellt, dass die Daten nicht undefiniert oder null sind.</p>

Das obige ist der detaillierte Inhalt vonWie greife ich nach einem asynchronen HTTP-Aufruf ordnungsgemäß auf Daten von einem Angular Observable zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!