No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Obteniendo datos de una API

14/20
Recursos

Uno de los procesos as铆ncronos m谩s comunes son las peticiones de datos desde una API. Para esto, Angular posee su propio cliente HTTP destinado a cumplir con el prop贸sito llamado HttpClientModule.

Consumo de API con Angular

Paso 1: Comienza importando el m贸dulo HttpClientModule, en el m贸dulo principal de tu aplicaci贸n desde @angular/common/http.

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    // ..
  ],
  imports: [
    // ...
    HttpClientModule
  ],
  providers: [],
  bootstrap: [ /* .. */ ]
})
export class AppModule { }

Paso 2: Crea un servicio para realizar todos los llamados a una API que necesites. En este servicio tienes que importar el cliente HTTP de Angular y crear un m茅todo por cada endpoint para el que necesites efectuar una petici贸n.

// services/api.service.ts
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(
    private http: HttpClient,
  ) { }
  
  getProducts() {
    return this.http.get(`https://example.com/api/productos`);
  }
}

Paso 3: Importa este nuevo servicio en tus componentes para efectuar los llamados a la API.

// components/catalogo/catalogo.component.ts
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent implements OnInit {

  public productos: Producto[] = [];

  constructor(
    private apiService: ApiService
  ) { }

  ngOnInit(): void {
      this.apiService.getProducts()
        .subscribe(res => {
          this.productos = res;
        });
  }

  // ...
}

El m茅todo ngOnInit() es el lugar apropiado para los llamados asincr贸nicos, recuerda que no es buena pr谩ctica hacerlo en el constructor.

Todo el cliente HTTP de Angular est谩 basado en Observables, por lo tanto, es recomendable suscribirse al m茅todo del servicio para obtener los datos cuando la API responda.

TIP: No es necesario que hagas un .unsubscribe() luego del llamado a la API. Angular ya lo hace por ti, cuando usas su cliente HTTP.

Jugando con observables

Si no tienes a tu disposici贸n una API Rest que devuelva datos para tu aplicaci贸n, voy a ense帽arte un peque帽o truco para que aun as铆 puedas continuar con tu desarrollo con un mock de datos.

Un Mock es una simulaci贸n de los datos reales que devolver谩 la API, salvo que esta vez obtendr谩s dichos datos desde el servicio a trav茅s de un Observable.

// services/api.service.ts
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor() { }

  getProducts(): Observable<Producto[]> {
    return of([
      {
        id: 1,
        name: 'Automobil de juguete',
        precio: 100,
        image: 'https://static3.depositphotos.com/1000865/118/i/600/depositphotos_1183767-stock-photo-toy-car.jpg'
      },
      {
        id: 2,
        name: 'Mu帽eca de trapo',
        precio: 180,
        image: 'https://kinuma.com/8869-home_default/muneca-de-trapo-mali.jpg'
      },
      {
        id: 3,
        name: 'Pelota de futbol',
        precio: 120,
        image: 'https://media.istockphoto.com/photos/soccer-ball-isolated-3d-rendering-picture-id1257575611?k=20&m=1257575611&s=612x612&w=0&h=g530fFJspT42xFGY7HycLvpBKLXpJ2XAkKCRyY-SK80='
      },
      {
        id: 4,
        name: 'Castillo',
        precio: 220,
        image: 'https://i.imgur.com/44nzvkQ.jpg'
      }
    ])
  }

}

En el ejemplo anterior, desde RxJS se est谩 importando 鈥淥bservable鈥 y 鈥渙f鈥 que te ayudar谩n a preparar tus datos.

Con Observable puedes tipear la respuesta de tus m茅todos de la siguiente manera Observable<Producto[]> para indicar que este devolver谩 un observable con un array de productos. La funci贸n of convierte lo que sea que le pongas dentro (un objeto, un array, un n煤mero, etc), en un observable.

De esta forma, sin tener una API real, puedes simular la interacci贸n de tu componente con datos provenientes de una proceso asincr贸nico.

Ver c贸digo fuente del proyecto


Contribuci贸n creada con los aportes de Kevin Fiorentino.

Aportes 28

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

en pasos:

En el servicio:
1- crear el servicio desde la terminal
2- importar el modulo HttpCliente en el servcio e inyectar e servicio en el constructor.
3 en el servicio se crea el metodo para hace la petici贸n de la API:
return this.http.get<Product[]>(鈥https://fakestoreapi.com/products鈥);

En el componente:
1- importar el servicio
2- inyectar el servicio en el constructor: private productsService: ProductsService
3- crear el metodo en el ngOnInit
this.productsService.getAllProducts()
.subscribe(data => {
this.products = data;

Por ultimo ya estaba creado un array tipado y se debe ajustar los campos con los campos de la API.

Chicos, hay una extension llamada JSON Viewer que les va a permitir ver los datos de un API de manera organizada, de lo contrario cuando abran la url no van a entender nada

Para la parte de tipado otra forma ser铆a tomar la respuesta que nos da la API y crear una interfaz a partir de esta data. Para crear la interfaz uso https://app.quicktype.io/.

Excelente explicaci贸n, y muy buen curso, explicas muy bien Nicolas!
Deber铆as actualizar tu curso de Angular 8 en ese me perd铆 un poco 馃槮

Una locura la manera en la que angula de manera indirecta le ense帽a a los desarrolladores algo de arquitectura.
crazy 馃懡

Acaso hay algo mas hermoso que nico explicando extraordinariamente las cosas?
鉂わ笍 _ 鉂わ笍

Maravillosa clase. Todo claro y bien explicado.

El manejo de las peticiones a API suele ser algo complejo y en Angular se ve muy f谩cil de manejar.

El mejor momento para ejecutar c贸digo as铆ncrono es en:

ngOnInit() 

cool, me ha encatado esto!

un Observable es un patr贸n de dise帽o que donde hay un sujeto que se suscribe a unos observadores.
Observable: flujo de datos, o coleccion de eventos, coleccion de elementos asincronas
Observers: funciones que estan escuchando ese flujo de datos (calback). Tambien es un Patron e igual Patron Iterador(Funcion map en programacion funcional https://www.educative.io/edpresso/how-observer-and-iterator-patterns-work-in-rxjs)
**Sujeto: ** sirve para distribuir varios Observers a la vez
Subscripcion: representa la ejecucucion de un Observable

Ventajas de un Observable Vs Promesa
promesa: 1 sola respuesta y NO es cancelable
Observable: flujo de respuestas, SI es cancelable

Otra manera de manejar una subscripci贸n es la siguiente:

this._productsService.getAllProducts()
      .subscribe({
        next:(products) => {
          this.products = products;
        },
        error: (error) => {
          console.error(error);
        },
        complete: () => {

        }
      });

Que genialidad la forma en la que uso la interfaz para estandarizar la data

Que buena clase, nico explica muy bien, igual a repasar y practicar

Les recomiendo guardar la url de la API en una variable:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Product } from '../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  apiUrl: string = 'https://fakestoreapi.com/products';

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

Excelente clase, no entendia muy bien el modulo de http

Excelente clase 猸

Al finalizar esta leccion el video se salta 4 lecciones, deberias seguir en la leccion 15-

En caso tal de que su interface de productos no concuerde con la API y quieran seguir us谩ndola sin necesidad de cambiarla, pueden usar los pipes de los Observables para hacer una transformaci贸n y retornar un nuevo Observable con el tipado que se necesita.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import { Product } from 'src/model/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductListService {

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts(): Observable<Product[]> {
    return this.http.get<Record<string, any>[]>("https://fakestoreapi.com/products")
      .pipe(
        map((dataList: Record<string, any>[]) => {
          const products: Product[] = dataList.map( data => ({
            id: data["id"],
            imageUrl: data["image"],
            name: data["title"],
            price: data["price"],
            provider: data["category"]
          }));
          return products;
        })
      );
  }
}

Toda la vida so帽ando apreder a usar APIs y no pens茅 que hoy ser铆a el d铆a!

Con el pluggin thunder Client de vs code podemos hacer consultas a api鈥檚 como en postman 馃槃

Bueno, aqu铆 s铆 que Angular hizo las cosas m谩s complicadas de lo normal 馃槄

En el caso de que quieran tipar el m茅todo que retorna el observable, lo pueden hacer de la siguiente forma.

  getProducts() : Observable<Product[]> {
    return this.httpClient.get<Product[]>("https://fakestoreapi.com/products")
  }

Excelente explicaci贸n 馃槂.

Obteniendo datos de una API


Para obtener datos de una API en Angular, se pueden utilizar las funciones y m茅todos proporcionados por la librer铆a HttpClient de Angular.

<aside>
<img src=鈥https://static.platzi.com/media/achievements/badge-angular-componentes-servicios-75f68ec3-48e0-430e-b7e2-889fad0d1984.png鈥 alt=鈥https://static.platzi.com/media/achievements/badge-angular-componentes-servicios-75f68ec3-48e0-430e-b7e2-889fad0d1984.png鈥 width=鈥40px鈥 /> HttpClient es un m贸dulo que proporciona una forma sencilla de hacer solicitudes HTTP en una aplicaci贸n Angular y recibir los resultados.

</aside>

Para utilizar HttpClient, se debe importar el m贸dulo en el componente que lo utilizar谩. Para ello, se debe incluir la siguiente l铆nea en el archivo que contiene el componente:

import { HttpClient } from '@angular/common/http';

A continuaci贸n, se debe crear una instancia de HttpClient en el constructor del componente:

constructor(private http: HttpClient) { }

Una vez que se ha creado una instancia de HttpClient, se pueden utilizar sus m茅todos para realizar solicitudes HTTP. El m茅todo m谩s com煤nmente utilizado es get(), que se utiliza para obtener datos de una API.

Para utilizar el m茅todo get(), se debe proporcionar una URL que apunte a la API de la que se desean obtener datos. Por ejemplo, si se desea obtener los datos de un usuario de GitHub, se podr铆a utilizar la siguiente URL:

this.http.get('https://api.github.com/users/{nombre-de-usuario}').subscribe(data => {
  console.log(data);
});

El m茅todo get() devuelve un objeto Observable, que se puede suscribir para recibir los datos. En este ejemplo, los datos se imprimen en la consola del navegador utilizando el m茅todo console.log().

Es importante destacar que para utilizar HttpClient, es necesario importar el m贸dulo HttpClientModule en el m贸dulo principal de la aplicaci贸n. Para ello, se debe incluir la siguiente l铆nea en el archivo que contiene el m贸dulo:

import { HttpClientModule } from '@angular/common/http';

y agregar el HttpClientModule al arreglo de imports del NgModule.

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

un compa帽ero comento sobre una extensi贸n para ver todo mejor los JSON aca esta https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh/related?hl=es

es una extension para google, no se si este para otros navegadores

Nicolas es el mejor profesor de habla hispana de angualr.

En el metodo ngOnInit del products.component.ts tuve que tipar data porque sino me tiraba error. Me quedo asi:

this.productsService.getAllProducts()
.subscribe((data:Product[]) => { this.products = data;});