¿Cómo devuelvo la respuesta de una llamada Observable/http/async en angular?

Si te encuentras con alguna parte que no comprendes puedes dejarlo en los comentarios y te ayudaremos rápidamente.

Solución:

Razón:

La razón por la que es undefined es que estás haciendo una operación asíncrona. Lo que significa que llevará algún tiempo completar el getEventList método (dependiendo principalmente de la velocidad de su red).

Así que echemos un vistazo a la llamada http.

this.es.getEventList()

Después de hacer (“disparar”) su solicitud http con subscribe Tú serás esperando por la respuesta Mientras espera, javascript ejecutará las líneas debajo de este código y si encuentra asignaciones/operaciones sincrónicas, las ejecutará de inmediato.

Así que después de suscribirse a la getEventList() y esperando la respuesta,

console.log(this.myEvents);

La línea se ejecutará inmediatamente. Y el valor es undefined antes de que llegue la respuesta del servidor (o de lo que haya inicializado en primer lugar).

Es similar a hacer:

ngOnInit()
    setTimeout(()=>
        this.myEvents = response;
    , 5000);

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

---

Solución:

Entonces, ¿cómo superamos este problema? Usaremos la función de devolución de llamada que es la subscribe método. Porque cuando los datos lleguen del servidor estarán dentro del subscribe con la respuesta

Así que cambiando el código a:

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

imprimirá la respuesta... después de un tiempo.

---

Lo que debes hacer:

Puede haber muchas cosas que hacer con su respuesta además de registrarla; debe hacer todas estas operaciones dentro de la devolución de llamada (dentro del subscribe función), cuando llegan los datos.

Otra cosa a mencionar es que si vienes de un Promise fondo, el then devolución de llamada corresponde a subscribe con observables.

---

Lo que no debes hacer:

No debe intentar cambiar una operación asíncrona a una operación de sincronización (no es que pueda). Una de las razones por las que tenemos operaciones asincrónicas es para no hacer que el usuario espere a que se complete una operación mientras puede hacer otras cosas en ese período de tiempo. Suponga que una de sus operaciones asíncronas tarda 3 minutos en completarse; si no tuviéramos las operaciones asíncronas, la interfaz se congelaría durante 3 minutos.

---

Lectura sugerida:

El crédito original de esta respuesta es: ¿Cómo devuelvo la respuesta de una llamada asincrónica?

Pero con el lanzamiento de angular2, nos presentaron el mecanografiado y los observables, por lo que esperamos que esta respuesta cubra los conceptos básicos del manejo de una solicitud asincrónica con observables.

Hacer una llamada http en angular/javascript es una operación asíncrona. Entonces, cuando realice una llamada http, asignará un nuevo hilo para finalizar esta llamada y comenzará la ejecución en la siguiente línea con otro hilo. Es por eso que está obteniendo un valor indefinido. así que haga el cambio a continuación para resolver esto

this.es.getEventList()  
      .subscribe((response)=>  
       this.myEvents = response;  
        console.log(this.myEvents); //<-this become synchronous now  
    );

Puede usar asyncPipe si usa myEvents solo en la plantilla.

Aquí ejemplo con asyncPipe y Angular4 HttpClient ejemplo

Puntuaciones y reseñas

Si haces scroll puedes encontrar las notas de otros usuarios, tú igualmente puedes mostrar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador