¿Cómo recuperar datos usando HTTP con Observables en Angular?

La mayoría de las aplicaciones obtienen datos del servidor backend. Necesitan hacer una solicitud HTTP GET. En este artículo, veremos cómo realizar una solicitud HTTP y mapear el resultado/respuesta en una array local. Esta array se puede utilizar para mostrar o filtrar los elementos como queramos. Lo más importante aquí es usar Observable. Veamos rápidamente Observable primero. 
Observable es importante porque ayuda a administrar datos asincrónicos (como los datos que provienen de un servidor back-end). Entonces, podemos pensar en Observable como una array donde los elementos llegan de forma asincrónica a lo largo del tiempo. Con Observable necesitamos un método en nuestro código que se suscriba a este observable. Observable es utilizado por Angular, incluido el evento angular y el servicio de cliente HTTP angular, por eso estamos cubriendo observable aquí.
Los pasos importantes se enumeran a continuación: 
 

1. Cree un servicio usando el comando: ng gs album. Aquí crearemos una clase AlbumService.
2. En la clase AlbumService, cree un método, digamos getAllAlbums(), que hará una solicitud HTTP GET usando Observable.
3. Inyecte este servicio en el constructor de cualquier componente que quiera usar estos métodos. Por ejemplo, AlbumListComponent.
4. Cree un método o use un enlace de ciclo de vida angular en la clase AlbumListComponent que se suscribirá al observable y luego recolectará la respuesta recibida.

Crear un servicio: album.service.ts 
 

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { IAlbum } from '../model/album';
 
@Injectable({
  providedIn: 'root'
})
export class AlbumService {
  albums_url: string =
"https://jsonplaceholder.typicode.com/albums";
  constructor(private _http: HttpClient) {}
}

Guardó la URL en una variable, album_url. Ahora necesitamos el servicio HttpClient para realizar una solicitud HTTP GET a esa URL, por lo que debemos inyectarlo en el constructor. Asegúrese de importar HttpClientModule desde @angular/common/http en el archivo del módulo correspondiente.
 

@NgModule({
  imports: [ BrowserModule,
       FormsModule, HttpClientModule ],
  declarations: [ ... ],
  providers: [ AlbumService ],
  bootstrap:    [ ...]
})
export class AppModule { }

Ahora crea un método getAllAlbums() : 
 

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { IAlbum } from '../model/album';
 
@Injectable({
  providedIn: 'root'
})
export class AlbumService {
  albums_url: string =
"https://jsonplaceholder.typicode.com/albums";
  constructor(private _http: HttpClient) {}
  getAllAlbums(): Observable<IAlbum []> {
    return this._http.get<IAlbum []>(this.albums_url)
      .pipe(
        tap(data =>
        console.log('All: ' + JSON.stringify(data)))
      );
  }
}

Tenga en cuenta que aquí el tipo de datos para Observable es la lista IAlbum y el tipo de retorno del método get también es la lista IAlbum. IAlbum es una interfaz.