Solicitudes GET - Platzi

Recursos

El verbo HTTP GET en JavaScript suele utilizarse para la obtención de datos. Por ejemplo, una lista de productos o el detalle de un único producto en particular.

Pasos para el consumo de API con Angular

El primer paso para el consumo de API con Angular es la importación del módulo correspondiente y los servicios, luego sigue la siguiente guía para proceder en tu camino.

1. Importa los módulos

Asegúrate de importar HttpClientModule en el módulo principal de tu proyecto.

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

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

2. Crea un servicio en tu proyecto

Crea un servicio en tu proyecto que será el responsable de todas las peticiones HTTP que tu aplicación necesite. Dicho servicio tiene que importar el cliente HTTP de Angular HttpClient para realizar los llamados a una API.

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

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

  constructor(
    private http: HttpClient,
  ) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`https://example.com/api/productos`);
  }
}

3. Importa los componentes

Importa el nuevo servicio en el componente que necesite realizar peticiones HTTP.

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

En Angular, cuando un componente tiene la necesidad de realizar una petición HTTP antes de ser renderizado suele utilizarse el hook ngOnInit() que forma parte del Ciclo de Vida de un componente.

Contribución creada por: Kevin Fiorentino.

Aportes 50

Preguntas 17

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Nicolas Molina

Profe Platzi

Hola! esta será la Fake API de este curso https://young-sands-07814.herokuapp.com/docs 😎

Jhon Stiven Granada Acevedo

Para aquellos que les cuenta utilizar postman u otro client, VS code tiene una extensión se llama Thunder Client muy interactiva para este tipo de peticiones y integrada en nuestro editor de codigo

José Luis Cortés Molina

Este es el enlace de la API!
https://young-sands-07814.herokuapp.com/api/products

Johan Eduardo Garcia

A manera de recomendación y aporte, hubiera sido bueno iniciar otro proyecto desde cero totalmente diferente 😃
Gracias

José Pablo Jiménez Cucanán

Tuve un Deja Vu

Aaron Paredes Cabrera

No se olviden de instalar todas las dependencias al clonar el proyecto para que no ocurra errores, lo pueden hacer con el siguiente comando:

npm i

Pol Valle Montes

Hola copmas,la nueva URL es:
https://api.escuelajs.co/api/v1/products/

Luis Angel Flores Galindo

Al final use la API que utilizaron en React y me funciono:

https://api.escuelajs.co/api/v1/products

Matias Acosta

La API esta teniendo problemas en este momento, Sabado 27 de noviembre a las 6:47, Hora Paraguay

Soy el unico que esta teniendo problemas? xd

alberto ayala rodriguez

hi a día de hoy la API está funcionando, solo hay que entender cómo funciona la interfaz de usuario que nos brinda el Swagger.
Vamos a hacer una petición get al servicio que nos están brindando:

Tenemos que saber cuál será nuestra url base para hacer peticiones al servicio, en esta ocasión tomaremos como la url base la siguiente "https://young-sands-07814.herokuapp.com/api/"
El servicio en Angular lo tendríamos de la siguiente manera

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

import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
//URL del API
  private URL_BASE = 'https://young-sands-07814.herokuapp.com/api/'

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>('https://fakestoreapi.com/products');
  }
}

debemos ir a mira al swagger cuál es el endpoint que vamos a consumir, en este caso vamos a consumir el de traer todos los productos, entonces la url a la cual haremos la petición sería: ‘https://young-sands-07814.herokuapp.com/api/products’, entonces nuestro servicio crearemos un método nuevo donde traemos los productos

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

import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
  private URL_BASE = 'https://young-sands-07814.herokuapp.com/api/'

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>('https://fakestoreapi.com/products');
  }

  //Método que hace la petición a los productos
  getProductsFakeApi() {
    return this.http.get(`${this.URL_BASE}products`);
  }
}

y ya, lo último sería consumir el servicio donde lo necesitemos,
si tienes alguna duda, comenta, estaré atento 😄

Antonella Soledad Castagna

Las solicitudes get son para hacer una llamada a la API y sirven para obtener información desde el servidor que puede ser un dato simple, un objeto, el detalle del objeto o una lista de objetos.

Tulio Junior Rangel Nuñez

A pocos días de no poder ver las imágenes (?)

Javier Romero

He encontrado esta api que sirve para realizar este curso, aunque hay que hacer ciertas modificaciones:
Creamos un modelo más Products.model.ts:

import { Product } from "./product.model";

export interface Products{
  products:Product[];
}

En products.service.ts:

// importamos el nuevo servicio
import { Products } from '../models/products.model';
// resto del codigo ... 
getAllProducts() {
	//Aqui no esperamos ya un array de Productos porque el array está dentro del modelo de Products
    return this.http.get<Products>('https://dummyjson.com/products');
  }

Y en products.component.ts:

ngOnInit(): void {
    this.productsService.getAllProducts()
    .subscribe(data => {
      this.products = data.products;
    });
  }

Espero que les sirva.

Gilberto Espinoza Maciel

Tuve una semana emocionalmente pesada compañeros, no logré sentarme a practicar la clase y seguir con mi formación.

Tengo aprobados múltiples cursos de habilidades blandas, tengo mis cuadernillos de actividades y un bullet journal.

Hay días en los que ni uno mismo cree en si. Los abrazo a todos los que han pasado por este síndrome del impostor crónico.

Ahora les comparto cómo va quedando mi proyecto.

Screenshot from 2023-08-07 17-03-09.png

Uso la app Responsively para ver múltiples vistas responsivas.

edinsoncoloniapa

Si despues de hacer el get no carga es posible que la URL esté incorrecta, con esta llegan directo:
https://young-sands-07814.herokuapp.com/api/products

Rafael Rodríguez Flores

Decenas de gracias por los comentarios y el apoyo de la comunidad. Con lo que estoy aprendiendo, cada vez identifico y resuelvo los problemas antes y mejor, y gracias a su ayuda comprendo incluso el por qué.

Christian Andres Moreno Ceballos

Existe una herramienta muy util para generar la clase de Typescript con el JSON de la Respuesta de la API 👇👇👇👇👇👇

Quicktype es una herramienta que te permite convertir un JSON en una clase en varios lenguajes de programación, incluyendo TypeScript. Esto es especialmente útil cuando trabajas con API que devuelven datos en formato JSON y quieres tener una forma fácil de acceder a esos datos en tu aplicación.

Para utilizar Quicktype, debes ingresar la URL de la API que deseas analizar o pegar directamente el JSON en la herramienta. Luego, seleccionas el lenguaje de programación en el que deseas generar la clase y Quicktype generará automáticamente el código correspondiente.

La herramienta también te permite personalizar la clase generada, como cambiar los nombres de las propiedades o excluir algunas de ellas. Además, Quicktype tiene una interfaz gráfica muy amigable, que te permite explorar los datos de tu JSON y ver cómo se transforman en código

Valentín Eduardo González Morales

Los valores falsy in javascript son los siguientes: * null * undefined * ''(string vacío) * 0 * false * 0n * NaN por lo cual \*ngIf="product.images.lenght" basta ya que array o es cero o un número positivo

Fer conto

porque el modelamiento de las apis es importante

Hacer un Tipado Fuerte con los datos esperados
nos ayuda en el mapeo y en saber a que referencia hace parte
para pruebas facilita la vida.

Obed Tzay

A día de hoy, Julio 2023, la plataforma de imágenes no está funcionando.

Reinaldo Omar Mendoza Leal

Otra API que pueden usar

David Jordan Amaya

Me funcionó con este endpoint:
https://api.escuelajs.co/api/v1/products

Y deben cambiar en el modelo “image” por “images”.

Cristian David Gutierrez

Para cuando vayan a hacer install de las dependencias del proyecto, saldran muchas advertencias relacionadas a las actualizaciones.

“dependencies”: {
"@angular/animations": “~14.2.10”,
"@angular/common": “~14.2.10”,
"@angular/compiler": “~14.2.10”,
"@angular/core": “~14.2.10”,
"@angular/forms": “~14.2.10”,
"@angular/platform-browser": “~14.2.10”,
"@angular/platform-browser-dynamic": “~14.2.10”,
"@angular/router": “~14.2.10”,
“date-fns”: “^2.29.3”,
“rxjs”: “~7.6.0”,
“tslib”: “^2.4.1”,
“zone.js”: “~0.12.0”
},
“devDependencies”: {
"@angular-devkit/build-angular": “~14.2.10”,
"@angular-eslint/builder": “14.2.0”,
"@angular-eslint/eslint-plugin": “14.2.0”,
"@angular-eslint/eslint-plugin-template": “14.2.0”,
"@angular-eslint/schematics": “14.2.0”,
"@angular-eslint/template-parser": “14.2.0”,
"@angular/cli": “~14.2.10”,
"@angular/compiler-cli": “~14.2.10”,
"@types/jasmine": “~3.8.0”,
"@types/node": “^12.11.1”,
"@typescript-eslint/eslint-plugin": “4.28.2”,
"@typescript-eslint/parser": “4.28.2”,
“eslint”: “^7.32.0”,
“jasmine-core”: “~4.5.0”,
“karma”: “~6.3.0”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage”: “~2.0.3”,
“karma-jasmine”: “~5.1.0”,
“karma-jasmine-html-reporter”: “~2.0.0”,
“typescript”: “~4.8.4”
}

Eso lo pueden pegar en el package.json (Reemplazando la variable de dependencies y devDependecies) y hacen la instalacion de nuevo. Son versiones mas actualizadas de las dependencias.

Enmanuel Josue Sarmiento Benitez

La api se encuentra caida a día de hoy 31 diciembre 2021 hora 11 am

Brayan Daniel Chacón Arrascue

La API no funciona

Reinaldo Omar Mendoza Leal

Asi se puede obtener el simbolo $ y un formato que me parece mas agradable
$300.00

currency:'COP':'symbol-narrow':'1.2-2'

Crisis Designty

Error de versiones en Angular (de 12 a 13)

En el caso de que a la hora de hacer ng serve o usen npm run start les dé error por tener una versión arriba de 12 en Angular deben actualizar su versión del proyecto en angular para que coincida con la global de su equipo.
Utilicen el siguiente comando:

npx @angular/cli@13 update @angular/core@13 @angular/cli@13
/* En caso de que haya un error con las migraciones usen --force pero de preferencia no usarlo */

Edgardo7x

La forma de explicar del profe es muy buena, me gustaría que nos hiciera un curdo de Rxjs.

Marianella Rezendes

Si tienen problemas para compilar el código una vez que lo descargan, prueben pararse en la carpeta del projecto cd src y luego en terminal npm install, luego ya compilara con ng serve -o

Jully Evangelina Flórez Fonseca

casi no puedo iniciar el proyecto por la versión pero lo logre 😁

Marianella Rezendes

Si funciona la API, prueben asi https://young-sands-07814.herokuapp.com/api/products

Jimmy Buriticá Londoño

Hoy Enero-22-2022 la API esta funcionando bien.

Esteban Castaño Rivera

ya no está funcionando <https://placeimg.com/> para generar imagenes, se puede cambiar a alguna de esta lista: [21 of the Best Placeholder Image Generators (loremipsum.io)](https://loremipsum.io/21-of-the-best-placeholder-image-generators/)

Ronald parra

Culminado, buen curso!

Jossie Quintero

Las imagenes no se estan cargando

Brandon Lee Aguero Fernandez

Actualmente las imágenes de la API no funciona pero lo puedes reemplazar por la Platzi Fake Store API

Brandon Lee Aguero Fernandez

Para que puedas tipas las respuestas de la API de una forma fácil QuickType. Especificas que el lenguaje sea TypeScript y las características que deseas para el tipado

Ander García Santesteban

La API ya no sirve y el ejercicio empeora muchísimo. El array de imagenes dejó de funcionar en Junio de 2023. Por favor, pueden solucionarlo? La calidad de experiencia del ejercicio merma muchísimo.

Gilberto Espinoza Maciel

Escogí esta ruta para aplicar las plantillas y lecciones vistas en
Curso para Aprender en Línea Efectivamente
De verdad que invertir en

Organización
Lectura Exploratoria
Borrador
Se nota al sentir antes de comenzar las clases aplicadas que tienes control de la calidad de tu aprendizaje. Les recomiendo con creces y una medalla que inviertan en sus métodos de estudio y técnicas de aprendizaje.
.
Tengo propuesto terminar la ruta de Frontend Angular para el siguiente mes y puedo visualizarlo sin abrumarme gracias al esfuerzo constante diario

Mateo Arias Correa

https://app.quicktype.io/
El Profe nos había regalado esta página cursos antes para hacer los modelos.

Diego Lopez

htpp

Antonella Soledad Castagna

Les dejo una api de una serie animada https://rickandmortyapi.com/

Tanelo Mondaca Silva

http…

Franklin Gil

Dejo esta API de pokemon que conoci cuando hice una prueba tecnica https://pokeapi.co/

Diego Fernando Caviedes Camaho

En el video falta importar la libreria Observable de rxjs
import { Observable } from ‘rxjs’; para podernos subscribe and unsubscribe

Segundo Juan

hoy 2 de junio la api funciona, pero no me gusta que devuelva fotos tan random y los titulos no tienen nada que ver con las imagenes. prefiero la api de fakestore

Diego Andrés Hernandez Moreno

Puede ser una tontería pero me sacó un buen rato darme cuenta de mi error:
La API ‘no funcionaba adecuadamente’, al cargar mi página salía solamente los botones de “Add to cart” apilados en una columna, el problema lo vi al intentar poner otra API y es que olvide pasar image de singular a plural (‘images’) en el modelo, y, por ende, en el componente y la vista.

Fue solamente cambiar ese detalle y todo funcionó adecuadamente.

José Nicolás Aristizabal Ramírez

Para el tipado creé una interfaz a partir de la respuesta de solicitud http get. Para ello usé https://app.quicktype.io/

Raúl Arturo Tristan Arriaga

Un bucle en el vídeo, no es aporte, solo quería comentarlo.

Hermes Aguilar

La API está caída, no funciona.