Comment accéder correctement aux données d'un observable angulaire après un appel HTTP asynchrone ?

Comment renvoyer une réponse à partir d'un appel observable/HTTP/asynchrone dans Angular

Problème :

Un retour observable données via un appel asynchrone, mais l'accès aux données entraîne un résultat indéfini en raison de la nature asynchrone du opération.

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

Composant :

@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!
  }
}

Raison :

Les opérations asynchrones prennent du temps, mais JavaScript exécute le code synchrone immédiatement. console.log(this.myEvents); est exécuté avant la réception des données du serveur.

Solution :

Utilisez le rappel d'abonnement pour gérer la réponse une fois qu'elle arrive :

this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //<-- not undefined anymore
    });

Conclusion :

Gérez les opérations asynchrones dans les rappels ou abonnez-vous aux fonctions pour accéder aux données après celles-ci. a été reçu. Cela garantit que les données ne sont pas indéfinies ou nulles.

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!