Solicitudes GET

2/23
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 48

Preguntas 17

Ordenar por:

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

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

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

Tuve un Deja Vu

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

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

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

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

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

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:

  1. 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');
  }
} 
  1. 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 😄

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

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.

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

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.

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.

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

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

Las imagenes no se estan cargando

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

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

porque el modelamiento de las apis es importante

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

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

Otra API que pueden usar

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

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

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.

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

La API no funciona

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

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

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

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

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

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

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

Culminado, buen curso!

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

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

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.

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

  1. Organización
  2. Lectura Exploratoria
  3. 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

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

htpp

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

http…

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

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

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

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.

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

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

La API está caída, no funciona.