You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
19 Hrs
22 Min
32 Seg

Obteniendo datos de una API

14/20
Resources

One of the most common asynchronous processes are data requests from an API. For this, Angular has its own HTTP client intended to serve the purpose called HttpClientModule.

API consumption with Angular

Step 1: Start by importing the HttpClientModule module, in the main module of your application from @angular/common/http.

// app.module.tsimport { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ // ..], imports: [ // ...HttpClientModule ], providers: [], bootstrap: [ /* .. */ ] })export class AppModule { }

Step 2: Create a service to make all the API calls you need. In this service you have to import the Angular HTTP client and create a method for each endpoint for which you need to make a request.

// services/api.service.tsimport { 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`); } } }

Step 3: Import this new service into your components to perform the API calls.

// components/catalogo/catalogo.component.tsimport { 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 products: Product[] = []; constructor( private apiService: ApiService ) { } ngOnInit(): void { this.apiService.getProducts() .subscribe(res => { this.products = res; }); } // ...}

The ngOnInInit() method is the appropriate place for asynchronous calls, remember that it is not good practice to do it in the constructor.

The entire Angular HTTP client is based on Observables, so it is advisable to subscribe to the service method to get the data when the API responds.

TIP: You don't need to do an .unsubscribe() after the API call. Angular already does that for you, when you use its HTTP client.

Playing with observables

If you don't have a Rest API at your disposal that returns data for your application, I'm going to show you a little trick so that you can still continue your development with a data mock.

A Mock is a simulation of the real data that the API will return, except this time you will get the data from the service through an Observable.

// services/api.service.tsimport { Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root'})export class ApiService {  constructor() { } getProducts(): Observable<Product[]> { return of([ { id: 1, name: 'Toy car', price: 100, image: 'https://static3.depositphotos.com/1000865/118/i/600/depositphotos_1183767-stock-photo-toy-car.jpg' }, { id: 2, name: 'Rag doll', price: 180, image: 'https://kinuma.com/8869-home_default/muneca-de-trapo-mali.jpg'}, { id: 3, name: 'Soccer ball', price: 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: 'Castle', price: 220, image: 'https://i.imgur.com/44nzvkQ.jpg' } ]) } } } } }

In the above example, from RxJS you are importing "Observable" and "of" which will help you to prepare your data.

With Observable you can type the response of your methods as follows Observable<Product[]> to indicate that it will return an observable with an array of products. The of function converts whatever you put inside it (an object, an array, a number, etc), into an observable.

This way, without having a real API, you can simulate the interaction of your component with data coming from an asynchronous process.

View project source code


Contribution created with contributions from Kevin Fiorentino.

Contributions 32

Questions 9

Sort by:

Want to see more contributions, questions and answers from the community?

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/.

Una locura la manera en la que angula de manera indirecta le enseña a los desarrolladores algo de arquitectura.
crazy 👽

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 😦

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() 

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);
  }
}

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

Excelente explicación 😃.

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-

Para los que anden trabajando en una version de angular superior, ya no se cuenta con al app.module.ts, la solucion es importar 'provideHttpClient()' en el archivo de app.config.ts

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’s 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")
  }
Estuve batallando un chorro porque no encontraba el archivo **app.modules.ts** y me daba error con lo del **HttpClient**, con la solución que di es colocar el **provideHttpClient** en los **providers** de l **ApplicationConfig** en **app.config.ts.** ```js import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = { providers: [provideRouter(routes), provideClientHydration(), provideHttpClient()] }; ```*import* { provideHttpClient } *from* '@angular/common/http'; *export* const appConfig: ApplicationConfig = { providers: \[provideRouter(routes), provideClientHydration(), provideHttpClient()]};

Ese curso sera un joya y nos abrirá las puertas para realizar proyectos en donde tengamos que interactuar con APIs.
Adicional a eso quiero compartir esta herramienta llamada quicktype, para generar tipos de datos a partir de un JSON de una manera rápida y sencilla.

Literal, el mejor profe de angular.

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;});