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

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); //<-- not undefined anymore
    });

Fazit:

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.

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!