↓Ir al contenido

Explorando Fetch API en React

4 mins
Tabla de contenido

En el ecosistema de desarrollo web moderno, interactuar con APIs externas es esencial para construir aplicaciones ricas en datos y funcionalidad. React, siendo una de las bibliotecas más populares para crear interfaces de usuario, ofrece una forma poderosa de hacer solicitudes a APIs externas mediante la Fetch API. En este artículo, exploraremos en detalle cómo realizar solicitudes a APIs externas en React, desde conceptos básicos hasta buenas prácticas y ejemplos prácticos.

Comprendiendo las APIs y Fetch #

¿Qué es una API? #

Una API (Interfaz de Programación de Aplicaciones) es un conjunto de reglas y protocolos que permite que diferentes aplicaciones se comuniquen entre sí. Proporciona una forma estandarizada para que las aplicaciones accedan y compartan datos y funcionalidades.

¿Qué es Fetch en JavaScript? #

Fetch es una API nativa de JavaScript que permite realizar solicitudes HTTP a recursos en línea, como APIs. Fetch proporciona una interfaz más moderna y versátil para realizar solicitudes que las alternativas anteriores, como XMLHttpRequest.

Por Qué Hacer Fetch a una API #

Realizar solicitudes a APIs externas en React es fundamental para:

  • Obtener datos en tiempo real desde fuentes externas.
  • Integrar contenido dinámico en las aplicaciones.
  • Acceder a recursos y servicios de terceros.
  • Sincronizar y actualizar información en aplicaciones.

Ventajas de Hacer Fetch a una API #

  • Dinamismo: Las APIs externas permiten que tus aplicaciones se mantengan actualizadas y ricas en contenido dinámico.

  • Reutilización: Puedes aprovechar los datos y recursos proporcionados por APIs existentes en lugar de recrearlos desde cero.

  • Economía de Recursos: Al utilizar servicios de terceros, ahorras tiempo y recursos al no tener que desarrollar todas las funcionalidades internamente.

Sintaxis Básica de Fetch en React #

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.log("Data from API:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

En este ejemplo, fetch se utiliza para realizar una solicitud GET a la URL proporcionada. Luego, los métodos .then() se encadenan para procesar la respuesta y los datos.

Ejemplos Prácticos #

Uso de fetch con then #

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

function FetchWithThenExample() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api.example.com/posts")
      .then((response) => response.json())
      .then((jsonData) => setData(jsonData))
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, []);

  return (
    <div>
      <h2>Posts from API:</h2>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchWithThenExample;

Uso de fetch con async/await #

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

function FetchWithAsyncAwaitExample() {
  const [data, setData] = useState([]);

  async function fetchData() {
    try {
      const response = await fetch("https://api.example.com/comments");
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <h2>Comments from API:</h2>
      <ul>
        {data.map((comment) => (
          <li key={comment.id}>{comment.body}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchWithAsyncAwaitExample;

Buenas Prácticas: Custom Hooks para Fetch #

Un enfoque limpio y reutilizable para hacer Fetch a una API es crear un custom hook. Aquí hay un ejemplo de cómo podrías hacerlo:

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  async function fetchData() {
    try {
      const response = await fetch(url);
      const jsonData = await response.json();
      setData(jsonData);
      setLoading(false);
    } catch (error) {
      console.error("Error fetching data:", error);
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

  return { data, loading };
}

export default useFetch;

Puedes usar este custom hook en tus componentes:

import React from "react";
import useFetch from "./useFetch";

function CustomHookExample() {
  const { data, loading } = useFetch("https://api.example.com/data");

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default CustomHookExample;

Hacer Fetch a APIs externas en React es una habilidad esencial para crear aplicaciones interactivas y dinámicas que se conectan con el mundo exterior. La Fetch API proporciona una forma sencilla y poderosa de realizar solicitudes HTTP y obtener datos en tiempo real. A través de ejemplos prácticos, hemos explorado cómo usar fetch con then y async/await, así como cómo implementar un custom hook reutilizable para manejar solicitudes a APIs de manera eficiente. Con esta capacidad en tu caja de herramientas, estarás listo para construir aplicaciones que se comunican con el mundo y ofrecen experiencias enriquecedoras a los usuarios.

↑