Procesamiento de API en JavaScript y React: de básico a avanzado

👋 ¡Hola, desarrolladores de front-end!

Hoy analizaremos uno de los temas más importantes en el mundo de JavaScript y React: trabajar con API. Aprenderemos a enviar solicitudes HTTP, gestionar errores y utilizar bibliotecas populares como fetch, axios y TanStack Query.

📡 ¿Qué es una API?

API (Application Programming Interface) es una interfaz a través de la cual los programas intercambian datos entre sí. Por ejemplo, tu aplicación React puede recibir publicaciones de un servidor remoto a través de una API.

🛠️ Las API a menudo se crean utilizando marcos:

• JavaScript — Express.js

• Python — Django / Flask

• Go — Gin

• Java — Spring Boot

• C# — ASP.NET Core

🔄 ¿Qué es el procesamiento de API?

El procesamiento de la API es el proceso de enviar solicitudes HTTP a un servidor y procesar la respuesta recibida. En JavaScript y React, los más utilizados son:

• fetch — método de navegador integrado

• axios — biblioteca externa popular

• TanStack Query (anteriormente React Query) es una biblioteca para gestionar fácilmente datos asíncronos en React

📬 Métodos HTTP básicos

⚙️ Trabajar con la API a través de fetch

Solicitud GET simple

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Error:', err));

Solicitud POST con cuerpo

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'JS is cool!',
    body: 'Scribbler allows you to combine HTML and JS',
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Error:', err));

Manejo de errores a través de try/catch

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) throw new Error('Network error');
    const data = await response.json();
    scrib.show(data);
  } catch (err) {
    scrib.show('Error:', err);
  } finally {
    scrib.show('Request completed');
  }
}
getData();

⚡ Uso de axios

axios ofrece una sintaxis más limpia y un manejo de errores más cómodo.

Solicitud GET

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Error:', err));

Solicitud POST

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Axios rules!',
  body: 'Error handling is much easier',
  userId: 1
}, {
  headers: { 'Content-Type': 'application/json' }
})
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Error:', err));

Manejo avanzado de errores

axios.get('https://jsonpl.typicode.com/posts')
  .catch(error => {
    if (error.response) {
      scrib.show('Server error:', error.response.status);
    } else if (error.request) {
      scrib.show('No response from the server');
    } else {
      scrib.show('Request error:', error.message);
    }
  });

⚛️ API en React (useEffect + useState)

import { useEffect, useState } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        if (!res.ok) throw new Error('Error retrieving data');
        return res.json();
      })
      .then(setPosts)
      .catch(err => setError(err.message));
  }, []);

  if (error) return <p>Ошибка: {error}</p>;

  return (
    <div>
      <h2>Посты</h2>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  );
}

⚙️ TanStack Query (React Query)

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data: posts, error, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts
  });

  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;

  return <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>;
}

✅ Conclusiones

📌 El procesamiento de API es una habilidad clave en el desarrollo web. Lo principal:

• Dominar fetch y axios

• Comprender los métodos HTTP

• Ser capaz de gestionar los errores

• Usar useEffect en React

• Automatizar la carga de datos con TanStack Query