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

Puedo realizar peticiones GET, POST, PUT y DELETE usando fetch y axios.
Sé manejar respuestas asíncronas con async/await y try-catch.
Implemento estados de carga y error en la interfaz de usuario.
Valido respuestas de API y manejo códigos de estado HTTP comunes (200, 404, 500).
Uso AbortController o cancel tokens para evitar memory leaks.
Configuro headers como Content-Type: application/json para peticiones POST/PUT.
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:

Crea un nuevo proyecto Expo: expo init TaskApp y elige una plantilla básica.
Instala axios: npm install axios.
Usa la API JSONPlaceholder (https://jsonplaceholder.typicode.com/todos) para obtener tareas.
Implementa un componente que muestre las tareas en una FlatList, con un indicador de carga.
Añade funcionalidad para marcar tareas como completadas (simulado con un PUT a la API).
Maneja errores mostrando un mensaje si falla la petición.
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.

Consumo de APIs REST con fetch y axios