Consumo de APIs REST con fetch y axios

Concepto clave

En el desarrollo de aplicaciones móviles con React Native y Expo, el consumo de APIs REST es fundamental para crear apps que interactúen con servicios externos. Imagina tu app como un restaurante: las APIs son los proveedores que traen los ingredientes (datos) desde diferentes lugares, y tu código es el chef que los prepara para mostrar platos (interfaces) atractivos a los clientes (usuarios).

Dos herramientas principales para esta tarea son fetch (nativa de JavaScript) y axios (biblioteca externa). Fetch viene incluido en React Native, mientras que axios requiere instalación pero ofrece ventajas como interceptores y cancelación de peticiones. Ambas permiten realizar operaciones HTTP como GET, POST, PUT y DELETE, esenciales para CRUD (Crear, Leer, Actualizar, Eliminar) en aplicaciones reales.

Cómo funciona en la práctica

Para consumir una API, primero necesitas entender su estructura: endpoints, métodos HTTP, y formatos de datos (generalmente JSON). En React Native con Expo, debes considerar la asincronía, manejando promesas con async/await para evitar bloquear la interfaz de usuario. Un flujo típico incluye: 1) Configurar la petición, 2) Enviarla, 3) Procesar la respuesta, y 4) Manejar errores.

Por ejemplo, al obtener datos de usuarios desde una API, usarías un método GET. Con fetch, esto implica llamar a fetch() con la URL, mientras que con axios usarías axios.get(). Ambas devuelven promesas que puedes manejar con .then() o async/await. Es crucial agregar manejo de errores con try-catch para fallos de red o respuestas no válidas.

Código en acción

Aquí un ejemplo básico con fetch para obtener datos de una API pública:

// Ejemplo con fetch
const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Error en la red: ' + response.status);
    }
    const data = await response.json();
    console.log('Datos obtenidos:', data);
    return data;
  } catch (error) {
    console.error('Error al obtener datos:', error);
    return null;
  }
};

Refactorización con axios para mejor manejo:

// Instalación: npm install axios
import axios from 'axios';

const fetchDataWithAxios = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log('Datos obtenidos con axios:', response.data);
    return response.data;
  } catch (error) {
    console.error('Error con axios:', error.response ? error.response.data : error.message);
    return null;
  }
};

Errores comunes

• No manejar estados de carga y error: Olvidar mostrar spinners o mensajes de error puede confundir a los usuarios. Siempre implementa estados como loading y error en tu componente.
• Ignorar la asincronía: Usar .then() sin async/await puede llevar a código difícil de leer. Prefiere async/await para claridad.
• Falta de validación de respuestas: Asumir que la API siempre devuelve datos válidos. Verifica response.ok en fetch o status en axios antes de procesar.
• No cancelar peticiones en desmontaje: En React Native, si un componente se desmonta antes de completar una petición, puede causar memory leaks. Usa AbortController con fetch o cancel tokens con axios.
• Exponer claves API en el código (solo para desarrollo): En producción, usa variables de entorno con Expo Constants o servicios seguros.

Checklist de dominio

1. Puedo realizar peticiones GET, POST, PUT y DELETE usando fetch y axios.
2. Sé manejar respuestas asíncronas con async/await y try-catch.
3. Implemento estados de carga y error en la interfaz de usuario.
4. Valido respuestas de API y manejo códigos de estado HTTP comunes (200, 404, 500).
5. Uso AbortController o cancel tokens para evitar memory leaks.
6. Configuro headers como Content-Type: application/json para peticiones POST/PUT.
7. Integro el consumo de API en componentes React Native con useEffect y useState.

Crear una app de lista de tareas con API REST

En este ejercicio, construirás una app simple de lista de tareas que consume una API REST simulada. Sigue estos pasos:

1. Crea un nuevo proyecto Expo: expo init TaskApp y elige una plantilla básica.
2. Instala axios: npm install axios.
3. Usa la API JSONPlaceholder (https://jsonplaceholder.typicode.com/todos) para obtener tareas.
4. Implementa un componente que muestre las tareas en una FlatList, con un indicador de carga.
5. Añade funcionalidad para marcar tareas como completadas (simulado con un PUT a la API).
6. Maneja errores mostrando un mensaje si falla la petición.
7. Prueba la app en un emulador o dispositivo físico.

Pistas

• Usa useState para almacenar las tareas y el estado de carga.
• Implementa useEffect para hacer la petición al montar el componente.
• Para simular el PUT, puedes usar axios.put con un ID de tarea y actualizar el estado local.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.