Curso de React | Fetch API y Axios

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

useEffect para recuperar datos de un servidor

Cuando queremos recuperar datos de un servidor, debemos usar el método useEffect para ejecutar la petición al servidor sólo cuando el componente se monta. De lo contrario, lo que ocurriría es:

  1. Al renderizar el componente App se haría la petición al servidor.
  2. Cuando la información llega del servidor, cambiaría el estado de la variable name
  3. Al cambiar el estado de la variable, se generaría otro render.
  4. Al ejecutarse otro render, volveríamos al paso 1, y así seguiríamos indefinidamente.

Usando la API fetch

La API Fetch proporciona una interfaz JavaScript para getionar peticiones y respuestas HTTP. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

Tienes más ejemplos de uso de API Fetch (GET, POST, PUT, DELETE) en el curso de Javascript.

/src/App.jsx
while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Axios

Para instalarlo, debemos ejecutar en la consola:

npm i axios

Petición GET

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Petición GET con parámetros

axios.get(`https://example.com`, {params: {paramName:paramValue}})

Abreviatura de una petición con axios

Con el siguiente código, podremos ahorranos poner la base_url en todas las peticiones.

/src/app/services/api.js

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

/src/app/services/people.js

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Dónde poner las peticiones al servidor

Cuando el proyecto empieza a crecer, es conveniente meter las peticiones al servidor en una carpeta llamada services que contendrá un fichero por cada entidad de la que vamos a hacer peticiones.

Curso de React | Fetch API y Axios 1
Curso de React | Fetch API y Axios 2

Cuando con el valor que devuelva una petición de las que tengamos en la carpeta de servicios querramos modificar un estado, lo que haremos es que dicha petición no devolverá un valor, sino una promesa que será gestionada en la página de destino.

Ejercicio

Vamos a hacer una petición a la API de chucknorris. Para ello, tendremos un fichero, api.js, en el que definiremos dos métodos:

  • getCategories()
  • getJokeFromCategory()

Estos dos métodos devolverán una promesa que será gestionada en App.js.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.