Tengo un servicio que devuelve un observable que realiza una solicitud http a mi servidor y obtiene los datos. Quiero usar estos datos, pero siempre termino sin undefined . ¿Cuál es el problema?
Servicio :
@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) } }Componente:
@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! } }Verifiqué ¿Cómo devuelvo la respuesta de una llamada asíncrona? publicar pero no pude encontrar una solución
Razón:
La razón por la que no está undefined es que está realizando una operación asíncrona. Lo que significa que llevará algún tiempo completar el método getEventList (dependiendo principalmente de la velocidad de su red).
Así que echemos un vistazo a la llamada http.
this.es.getEventList() Después de que realmente haga ("dispare") su solicitud http con subscribe , estará esperando 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.
Entonces, después de suscribirse a getEventList() y esperar la respuesta,
console.log(this.myEvents);
La línea se ejecutará inmediatamente. Y su valor no está undefined antes de que llegue la respuesta del servidor (o de lo que sea que haya inicializado en primer lugar).
Es similar a hacer:
ngOnInit(){ setTimeout(()=>{ this.myEvents = response; }, 5000); console.log(this.myEvents); //This prints undefined! }Entonces, ¿cómo superamos este problema? Usaremos la función de devolución de llamada, que es el método de
subscribe. Porque cuando los datos lleguen desde el servidor, estarán dentro de lasubscribecon 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.
Puede haber muchas cosas que hacer con su respuesta además de registrarla; debe realizar todas estas operaciones dentro de la devolución de llamada (dentro de la función de subscribe ), cuando lleguen los datos.
Otra cosa a mencionar es que si proviene de un fondo de Promise then la devolución de llamada corresponde a subscribe con observables.
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 asíncrona?
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 });