Fetch API y Axios

Contactar con el profesor

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.

Ejemplo básico, usando then

./app.js
import {useEffect} from 'react';

const App = () => {
  const [name, setName] = useState(null);

  useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon/ditto') // hacemos la petición get
    .then(res => res.json()) // cuando hayamos terminado (then) parseamos a json la respuesta de la petición
    .then(res => setName(res.name)); // cuando hayamos terminado (then) actualizamos el estado nombre
  }, []); //Debemos usar los [] para que la petición sólo se ejecute cuando el componente se monte. De lo contrario se ejecutaría en cada render. Si ponemos una variable de estado dentro de los [], la petición se ejecutárá cada vez que esa variable cambie.
  return <p>{name}</p>;
}

Axios

Petición GET

import { useState, useEffect } from "react";
import axios from "axios";

const App = (_) => {
  const [name, setName] = useState([]);

  useEffect(() => {
    axios
      .get(`https://pokeapi.co/api/v2/pokemon/ditto`)
      .then((res) => {
        setName(res.data.name);
      })
  }, []);

  return <div>{name}</div>;
};
export default App;

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.

Fetch API y Axios 1
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, services.js, en el que definiremos dos métodos:

  • getCategories()
  • getJokeFromCategory()

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

← React router
Context API →

Aviso Legal | Política de privacidad