Tutorial React: Solicitudes HTTP con Fetch API

¿Qué es la API Fetch?

La API Fetch es una interfaz nativa de JavaScript que permite realizar solicitudes HTTP desde el navegador. Es una alternativa moderna y más potente que XMLHttpRequest, y está diseñada para ser más flexible y sencilla de usar. La API Fetch devuelve Promesas, lo que facilita el manejo de operaciones asíncronas.

Características principales

• Sintaxis sencilla: La API Fetch utiliza una sintaxis basada en Promesas que es más clara y manejable que los antiguos callbacks.
• Soporte para operaciones asíncronas: Gracias a las Promesas, puedes usar async/await para escribir código asíncrono de forma más legible.
• Configuración flexible: Puedes configurar las solicitudes HTTP con diversas opciones como métodos, cabeceras, cuerpo de la solicitud, etc.
• Manejo de errores: La API Fetch proporciona mecanismos claros para manejar errores de red o de respuesta.

Realizar una solicitud GET

Para realizar una solicitud GET en React utilizando la Fetch API, es fundamental entender cómo se manejan las operaciones asíncronas y cómo se integran dentro del ciclo de vida de un componente. En este caso, utilizaremos el hook useEffect para ejecutar la solicitud cuando el componente se monte. A continuación, se explica paso a paso cómo realizar una solicitud GET y manejar la respuesta de manera adecuada.

Primero, es necesario importar los hooks useEffect y useState de React. useEffect se usará para ejecutar la solicitud al montar el componente, mientras que useState se utilizará para almacenar los datos obtenidos de la API.

// Productos.jsx
import { useEffect, useState } from 'react';

export default function Productos() {
  const [productos, setProductos] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProductos() {
      try {
        const response = await fetch('https://fakestoreapi.com/products');
        if (!response.ok) {
          throw new Error('Error en la solicitud: ' + response.status);
        }
        const data = await response.json();
        setProductos(data);
      } catch (error) {
        setError(error.message);
      }
    }

    fetchProductos();
  }, []);

  return (
    <div>
      {error ? (
        <p>Error: {error}</p>
      ) : (
        <ul>
          {productos.map((producto) => (
            <li key={producto.id}>{producto.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

En el código anterior, se define el componente Productos. Dentro del useEffect, se define la función asíncrona fetchProductos que realiza la solicitud GET a la API de Fake Store. La URL https://fakestoreapi.com/products es el endpoint al que se realiza la solicitud.

• Manejo de la respuesta: La respuesta de la solicitud se maneja verificando si response.ok es true. Si no lo es, se lanza un error. Después, se parsea la respuesta a JSON y se almacena en el estado productos utilizando setProductos.
• Manejo de errores: En caso de error durante la solicitud, se captura la excepción y se almacena el mensaje de error en el estado error utilizando setError.

Finalmente, el componente renderiza una lista de productos si la solicitud fue exitosa. Si hubo un error, se muestra un mensaje de error.

Para integrar este componente en una aplicación principal, se puede importar y utilizar de la siguiente manera:

// App.jsx
import React from 'react';
import Productos from './components/Productos/Productos';

export default function App() {
  return (
    <div>
      <h1>Lista de Productos</h1>
      <Productos />
    </div>
  );
}

En este ejemplo, el componente Productos se incluye dentro del componente principal App, que se encarga de renderizar la lista de productos obtenidos de la API.

Realizar una solicitud POST

Para realizar una solicitud POST en React utilizando la Fetch API, es esencial entender cómo enviar datos al servidor y cómo manejar la respuesta. A continuación, se explica paso a paso cómo realizar una solicitud POST y manejar la respuesta de manera adecuada.

Primero, es necesario importar los hooks useEffect y useState de React. useEffect se usará para ejecutar la solicitud al montar el componente, mientras que useState se utilizará para almacenar los datos obtenidos de la API y el estado de error.

// CrearProducto.jsx
import { useEffect, useState } from 'react';

export default function CrearProducto() {
  const [producto, setProducto] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function postProducto() {
      try {
        const response = await fetch('https://fakestoreapi.com/products', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            title: 'Nuevo Producto',
            price: 29.99,
            description: 'Descripción del nuevo producto',
            image: 'https://i.pravatar.cc',
            category: 'electronics',
          }),
        });
        if (!response.ok) {
          throw new Error('Error en la solicitud: ' + response.status);
        }
        const data = await response.json();
        setProducto(data);
      } catch (error) {
        setError(error.message);
      }
    }

    postProducto();
  }, []);

  return (
    <div>
      {error ? (
        <p>Error: {error}</p>
      ) : producto ? (
        <div>
          <h1>{producto.title}</h1>
          <p>{producto.description}</p>
          <p>Precio: {producto.price}</p>
        </div>
      ) : (
        <p>Creando producto...</p>
      )}
    </div>
  );
}

En el código anterior, se define el componente CrearProducto. Dentro del useEffect, se define la función asíncrona postProducto que realiza la solicitud POST a la API de Fake Store. La URL https://fakestoreapi.com/products es el endpoint al que se realiza la solicitud.

• method: Se especifica el método HTTP como POST.
• headers: Se definen las cabeceras HTTP, en este caso, estableciendo Content-Type como application/json.
• body: Se utiliza para enviar los datos al servidor, los cuales se convierten a una cadena JSON utilizando JSON.stringify.

El manejo de la respuesta se realiza verificando si response.ok es true. Si no lo es, se lanza un error. Después, se parsea la respuesta a JSON y se almacena en el estado producto utilizando setProducto.

El manejo de errores se realiza capturando cualquier excepción que ocurra durante la solicitud y almacenando el mensaje de error en el estado error utilizando setError.

Finalmente, el componente renderiza los detalles del producto creado si la solicitud fue exitosa. Si hubo un error, se muestra un mensaje de error. Si la solicitud está en curso, se muestra un mensaje de "Creando producto...".

Para integrar este componente en una aplicación principal, se puede importar y utilizar de la siguiente manera:

// App.jsx
import React from 'react';
import CrearProducto from './components/CrearProducto/CrearProducto';

export default function App() {
  return (
    <div>
      <h1>Crear Nuevo Producto</h1>
      <CrearProducto />
    </div>
  );
}

En este ejemplo, el componente CrearProducto se incluye dentro del componente principal App, que se encarga de renderizar la interfaz para la creación de un nuevo producto.

Realizar una solicitud POST en React con Fetch API implica configurar adecuadamente los parámetros de la solicitud, manejar la respuesta y los errores, y actualizar la interfaz de usuario en consecuencia.

Realizar una solicitud PUT y PATCH

Las solicitudes PUT y PATCH se utilizan para actualizar recursos en un servidor. La diferencia principal entre ambos métodos es que PUT reemplaza el recurso completo, mientras que PATCH actualiza solo las partes especificadas del recurso. A continuación, se explica cómo realizar solicitudes PUT y PATCH en React utilizando la Fetch API.

Primero, es necesario importar los hooks useEffect y useState de React. useEffect se usará para ejecutar la solicitud cuando el componente se monte, y useState se utilizará para almacenar los datos obtenidos de la API y el estado de error.

Ejemplo de solicitud PUT:

// ActualizarProducto.jsx
import { useEffect, useState } from 'react';

export default function ActualizarProducto() {
  const [producto, setProducto] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function putProducto() {
      try {
        const response = await fetch('https://fakestoreapi.com/products/1', {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            title: 'Producto Actualizado',
            price: 39.99,
            description: 'Descripción actualizada del producto',
            image: 'https://i.pravatar.cc',
            category: 'electronics',
          }),
        });
        if (!response.ok) {
          throw new Error('Error en la solicitud: ' + response.status);
        }
        const data = await response.json();
        setProducto(data);
      } catch (error) {
        setError(error.message);
      }
    }

    putProducto();
  }, []);

  return (
    <div>
      {error ? (
        <p>Error: {error}</p>
      ) : producto ? (
        <div>
          <h1>{producto.title}</h1>
          <p>{producto.description}</p>
          <p>Precio: {producto.price}</p>
        </div>
      ) : (
        <p>Actualizando producto...</p>
      )}
    </div>
  );
}

En el código anterior, el componente ActualizarProducto realiza una solicitud PUT a la API de Fake Store para actualizar un producto existente. La URL https://fakestoreapi.com/products/1 es el endpoint al que se realiza la solicitud. Se especifica el método HTTP como PUT, se definen las cabeceras HTTP estableciendo Content-Type como application/json, y se envían los datos del producto en el cuerpo de la solicitud utilizando JSON.stringify.

El manejo de la respuesta se realiza verificando si response.ok es true. Si no lo es, se lanza un error. Después, se parsea la respuesta a JSON y se almacena en el estado producto utilizando setProducto. El manejo de errores se realiza capturando cualquier excepción que ocurra durante la solicitud y almacenando el mensaje de error en el estado error utilizando setError.

Ejemplo de solicitud PATCH:

// ModificarProducto.jsx
import { useEffect, useState } from 'react';

export default function ModificarProducto() {
  const [producto, setProducto] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function patchProducto() {
      try {
        const response = await fetch('https://fakestoreapi.com/products/1', {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            price: 49.99,
          }),
        });
        if (!response.ok) {
          throw new Error('Error en la solicitud: ' + response.status);
        }
        const data = await response.json();
        setProducto(data);
      } catch (error) {
        setError(error.message);
      }
    }

    patchProducto();
  }, []);

  return (
    <div>
      {error ? (
        <p>Error: {error}</p>
      ) : producto ? (
        <div>
          <h1>{producto.title}</h1>
          <p>{producto.description}</p>
          <p>Precio: {producto.price}</p>
        </div>
      ) : (
        <p>Modificando producto...</p>
      )}
    </div>
  );
}

En este código, el componente ModificarProducto realiza una solicitud PATCH a la API de Fake Store para modificar el precio de un producto existente. La URL https://fakestoreapi.com/products/1 es el endpoint al que se realiza la solicitud. Se especifica el método HTTP como PATCH, se definen las cabeceras HTTP estableciendo Content-Type como application/json, y se envían los datos del producto en el cuerpo de la solicitud utilizando JSON.stringify.

El manejo de la respuesta y los errores se realiza de manera similar a la solicitud PUT.

Realizar una solicitud DELETE

Para realizar una solicitud DELETE en React utilizando la Fetch API, es esencial entender cómo enviar una solicitud para eliminar un recurso del servidor. A continuación, se explica paso a paso cómo realizar una solicitud DELETE y manejar la respuesta de manera adecuada.

Primero, es necesario importar los hooks useEffect y useState de React. useEffect se usará para ejecutar la solicitud cuando se necesite, y useState se utilizará para manejar el estado de error y la confirmación de la eliminación.

// EliminarProducto.jsx
import { useState } from 'react';

export default function EliminarProducto() {
  const [mensaje, setMensaje] = useState(null);
  const [error, setError] = useState(null);

  async function deleteProducto() {
    try {
      const response = await fetch('https://fakestoreapi.com/products/1', {
        method: 'DELETE',
      });
      if (!response.ok) {
        throw new Error('Error en la solicitud: ' + response.status);
      }
      setMensaje('Producto eliminado correctamente');
    } catch (error) {
      setError(error.message);
    }
  }

  return (
    <div>
      {error ? (
        <p>Error: {error}</p>
      ) : mensaje ? (
        <p>{mensaje}</p>
      ) : (
        <button onClick={deleteProducto}>Eliminar Producto</button>
      )}
    </div>
  );
}

En el código anterior, se define el componente EliminarProducto. Dentro de la función deleteProducto, se realiza la solicitud DELETE a la API de Fake Store para eliminar un producto existente. La URL https://fakestoreapi.com/products/1 es el endpoint al que se realiza la solicitud.

• method: Se especifica el método HTTP como DELETE.
• Manejo de la respuesta: La respuesta de la solicitud se maneja verificando si response.ok es true. Si no lo es, se lanza un error. Si la solicitud es exitosa, se actualiza el estado mensaje con un mensaje de confirmación.
• Manejo de errores: En caso de error durante la solicitud, se captura la excepción y se almacena el mensaje de error en el estado error utilizando setError.

El componente renderiza un botón que, al ser clicado, ejecuta la función deleteProducto. Si la eliminación es exitosa, se muestra un mensaje de confirmación. Si ocurre un error, se muestra un mensaje de error.

Realizar una solicitud DELETE en React con Fetch API implica configurar adecuadamente los parámetros de la solicitud, manejar la respuesta y los errores, y actualizar la interfaz de usuario en consecuencia.

Manejo de errores con API Fetch

El manejo de errores es fundamental al trabajar con solicitudes HTTP en React utilizando la Fetch API. Al realizar una solicitud HTTP, pueden surgir varios tipos de errores: errores de red, errores de servidor (códigos de estado HTTP 5xx), errores de cliente (códigos de estado HTTP 4xx) y errores de sintaxis o de procesamiento de datos. Es crucial manejar estos errores correctamente para mejorar la experiencia del usuario y asegurar la robustez de la aplicación.

Para manejar errores en solicitudes Fetch, se debe seguir una serie de pasos y buenas prácticas:

Verificación del estado de la respuesta: La Fetch API no rechaza la Promesa en caso de errores HTTP como 404 o 500. Por lo tanto, es necesario verificar manualmente el estado de la respuesta utilizando la propiedad response.ok.

Captura de excepciones: Utilizar bloques try...catch para capturar cualquier excepción que pueda ocurrir durante la solicitud o el procesamiento de la respuesta.

Manejo de errores específicos: Proporcionar mensajes de error específicos y útiles para diferentes tipos de errores.

Ejemplo de manejo de errores en una solicitud GET:

// Productos.jsx
import { useEffect, useState } from 'react';

export default function Productos() {
  const [productos, setProductos] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProductos() {
      try {
        const response = await fetch('https://fakestoreapi.com/products');
        if (!response.ok) {
          throw new Error(`Error en la solicitud: ${response.status}`);
        }
        const data = await response.json();
        setProductos(data);
      } catch (error) {
        setError(error.message);
      }
    }

    fetchProductos();
  }, []);

  return (
    <div>
      {error ? (
        <p>Error: {error}</p>
      ) : (
        <ul>
          {productos.map((producto) => (
            <li key={producto.id}>{producto.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

En este ejemplo, se realiza una solicitud GET a la API de Fake Store para obtener una lista de productos. La verificación del estado de la respuesta se realiza mediante response.ok. Si la respuesta no es exitosa, se lanza un error con un mensaje que incluye el código de estado HTTP. El bloque try...catch captura cualquier error durante la solicitud o el procesamiento de la respuesta y almacena el mensaje de error en el estado error.

Ejemplo de manejo de errores en una solicitud POST:

// CrearProducto.jsx
import { useState } from 'react';

export default function CrearProducto() {
  const [producto, setProducto] = useState(null);
  const [error, setError] = useState(null);

  async function postProducto() {
    try {
      const response = await fetch('https://fakestoreapi.com/products', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          title: 'Nuevo Producto',
          price: 29.99,
          description: 'Descripción del nuevo producto',
          image: 'https://i.pravatar.cc',
          category: 'electronics',
        }),
      });
      if (!response.ok) {
        throw new Error(`Error en la solicitud: ${response.status}`);
      }
      const data = await response.json();
      setProducto(data);
    } catch (error) {
      setError(error.message);
    }
  }

  return (
    <div>
      <button onClick={postProducto}>Crear Producto</button>
      {error ? (
        <p>Error: {error}</p>
      ) : producto ? (
        <div>
          <h1>{producto.title}</h1>
          <p>{producto.description}</p>
          <p>Precio: {producto.price}</p>
        </div>
      ) : null}
    </div>
  );
}

En este ejemplo, se realiza una solicitud POST a la API de Fake Store para crear un nuevo producto. La solicitud incluye el método HTTP POST, las cabeceras necesarias y el cuerpo de la solicitud en formato JSON. De nuevo, se verifica el estado de la respuesta y se lanza un error si la respuesta no es exitosa. El bloque try...catch captura cualquier error y actualiza el estado error con el mensaje de error correspondiente.

El manejo adecuado de errores en solicitudes HTTP mejora la robustez y la usabilidad de la aplicación. Es fundamental proporcionar feedback claro y específico al usuario cuando ocurren errores, lo que puede incluir mensajes de error en la interfaz de usuario o acciones de recuperación automáticas según el tipo de error.