observable - keblato/TutorialesTalleres-Angular GitHub Wiki

Qué significa Observable en los llamados http ?

Este tema lo tratamos en el ejemplo de Desplegar una Lista de Editoriales en el punto HttpClient.

Los llamados http de (HttpClient de Angular) son asíncronos, es decir se hace el llamado y no sabemos cuándo va a terminar y regresar. Significa que el programa que hizo el llamado, no se queda esperando sino que sigue su ejecución. Si por ejemplo tuviéramos el código:


        http.get<Editorial[]>(API_URL + editorials); // El llamado http
        llamarOtraFuncion(); //

llamarOtraFuncion() se ejecutaría sin que sepamos si ya regresó el llamado a get.

Lo que se hace entonces es declarar la función que contiene el llamado http como Observable.

Note que esta función está declarada en un servicio (EditorialService en nuestro ejemplo):

    getEditorials() : Observable<Editorial[]> {
        return this.http.get<Editorial[]>(API_URL + editorials);
    }

Quien necesite enterarse de que ya terminó la ejecución, debe suscribirse a ella.

Note que la función que necesita enterarse está declarada en un componente (EditorialListComponent en nuestro ejemplo):

Por eso hacemos:

...
export class EditorialListComponent implements OnInit {
    constructor(private editorialService: EditorialService) { } 
    editorials: Editorial[];
    getEditorials(): void {
        this.editorialService.getEditorials().subscribe(editorials => this.editorials = editorials);
    }
    ...
}

Esta función invoca la función que es Observable:

this.editorialService.getEditorials() y la manera de decir que le avise cuando termine es:

this.editorialService.getEditorials().subscribe (...)

Lo que va dentro de subscribe es lo que queremos que haga cuando se obtenga el valor, en este caso al atributo de la clase this.editorials le asignamos lo que devolvió el get.

this.editorialService.getEditorials().subscribe(editorials => this.editorials = editorials);