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
Http Basic
Lo que aprenderás para consumir API con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promesa
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
Solicitudes GET
2/23Recursos
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:
Este es el enlace de la API!
https://young-sands-07814.herokuapp.com/api/products
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:
- 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 😄
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
- 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.
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 😁
Si funciona la API, prueben asi https://young-sands-07814.herokuapp.com/api/products
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
- 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
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?