Comment gérer les réponses asynchrones des observables dans Angular ?

Comment renvoyer la réponse d'un appel Observable/http/async en angulaire ?

Problème :

Récupération de données d'un serveur en Angular l'utilisation d'un observable peut entraîner une valeur initiale non définie si elle est tentée immédiatement.

Service :

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

Composant :

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

Raison :

La requête HTTP est asynchrone, ce qui signifie que le console.log( this.myEvents) s'exécute avant la réponse arrive.

Solution :

Gérez la réponse seulement après son arrivée en utilisant le rappel d'abonnement.

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

Considérations :

• Effectuer toutes les opérations dans le rappel d'abonnement lorsque les données arrivent.
• Reconnaissez que les opérations asynchrones empêchent le gel de l'interface en attendant réponses.
• Cette approche est similaire au rappel then dans la programmation asynchrone basée sur Promise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!