Wie gehe ich mit asynchronen Antworten von Observablen in Angular um?

Wie gebe ich die Antwort von einem Observable/http/async-Aufruf in Angular zurück?

Problem:

Abrufen von Daten von einem Server in Angular Die Verwendung eines Observable kann bei Versuch zu einem undefinierten Anfangswert führen sofort.

Dienst:

@Injectable()
export class EventService {
  ...
  getEventList(): Observable<any> {
    ...
    return this.http.get(...).map(...).catch(...);
  }
}

Komponente:

export class EventComponent {
  myEvents: any;
  ngOnInit() {
    this.es.getEventList().subscribe((response) => {
      this.myEvents = response;
    });
    console.log(this.myEvents); // Initially undefined
  }
}

Grund:

Die HTTP-Anfrage ist asynchron, d. h. das console.log( this.myEvents) wird vor der Antwort ausgeführt kommt an.

Lösung:

Verarbeiten Sie die Antwort erst, nachdem sie eintrifft, indem Sie den Abonnement-Rückruf verwenden.

ngOnInit() {
  this.es.getEventList().subscribe((response) => {
    this.myEvents = response;
    console.log(this.myEvents); // Not undefined
  });
}

Überlegungen:

• Durchführen alle Vorgänge innerhalb des Subscribe-Rückrufs, wenn die Daten eintreffen.
• Beachten Sie, dass asynchrone Vorgänge ein Einfrieren der Schnittstelle während des Wartens verhindern Antworten.
• Dieser Ansatz ähnelt dem then-Rückruf in der Promise-basierten asynchronen Programmierung.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit asynchronen Antworten von Observablen in Angular um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!