Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Obteniendo datos de una API

14/20
Recursos

Aportes 16

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.

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 👽

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

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

Excelente explicación 😃.

El mejor momento para ejecutar código asíncrono es en:

ngOnInit() 

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: () => {

        }
      });

Maravillosa clase. Todo claro y bien explicado.

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

Acaso hay algo mas hermoso que nico explicando extraordinariamente las cosas?
❤️ _ ❤️

cool, me ha encatado esto!

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

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

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