Consumo de APIs REST con Fetch y Axios en React Native

Concepto clave

En el desarrollo de aplicaciones móviles con React Native y Expo, el consumo de APIs REST es fundamental para conectar tu app con servicios externos, como bases de datos, autenticación o contenido dinámico. Piensa en una API como un camarero en un restaurante: tu app (el cliente) hace una solicitud (como pedir un plato), y la API (el camarero) trae la respuesta (la comida) desde la cocina (el servidor). Esto permite que tu app muestre datos actualizados sin necesidad de recargar manualmente, similar a cómo una app de clima obtiene información en tiempo real.

Para realizar estas solicitudes, usamos principalmente dos herramientas: Fetch (nativo de JavaScript) y Axios (una librería externa). Fetch viene incluido en React Native, lo que lo hace ligero y sin dependencias adicionales, ideal para proyectos simples. Axios, por otro lado, ofrece características avanzadas como interceptores y cancelación de solicitudes, siendo más robusto para aplicaciones complejas. Ambas permiten realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) mediante métodos HTTP como GET, POST, PUT y DELETE, esenciales para interactuar con servidores en el mundo real.

Cómo funciona en la práctica

Para consumir una API en React Native con Expo, sigue estos pasos: primero, identifica el endpoint de la API (la URL a la que enviarás solicitudes). Luego, elige entre Fetch o Axios según tus necesidades. Con Fetch, usas la función fetch() que devuelve una promesa; con Axios, instalas la librería y usas métodos como axios.get(). En ambos casos, manejas la respuesta asíncrona con async/await o .then(), y actualizas el estado de tu componente para reflejar los datos. Por ejemplo, al cargar una lista de productos desde una API, harías una solicitud GET al montar el componente, procesarías la respuesta JSON y la mostrarías en una lista.

Un flujo típico incluye: 1) Configurar la solicitud con headers (como Content-Type para JSON), 2) Enviar la solicitud con el método adecuado, 3) Manejar errores con try-catch o .catch(), y 4) Actualizar la UI. En Expo, asegúrate de que tu app tenga permisos de red si es necesario, aunque Fetch y Axios funcionan out-of-the-box en la mayoría de los casos. Para APIs que requieren autenticación, añade tokens en los headers, similar a mostrar una identificación al entrar a un lugar restringido.

Codigo en accion

Aquí tienes un ejemplo funcional usando Fetch para obtener datos de una API pública. Crea un componente en React Native y copia este código:

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

  const fetchProducts = async () => {
    try {
      const response = await fetch('https://fakestoreapi.com/products');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      setProducts(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return ;
  }

  if (error) {
    return Error: {error};
  }

  return (
     item.id.toString()}
      renderItem={({ item }) => (
        
          {item.title}
          {item.price}
        
      )}
    />
  );
}

Ahora, refactorizamos el mismo ejemplo usando Axios para mostrar mejoras. Primero, instala Axios: npm install axios. Luego, modifica el código:

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import axios from 'axios';

export default function ProductListAxios() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

  const fetchProducts = async () => {
    try {
      const response = await axios.get('https://fakestoreapi.com/products');
      setProducts(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return ;
  }

  if (error) {
    return Error: {error};
  }

  return (
     item.id.toString()}
      renderItem={({ item }) => (
        
          {item.title}
          {item.price}
        
      )}
    />
  );
}

Nota cómo Axios simplifica el manejo de respuestas al parsear JSON automáticamente y proporcionar un objeto response.data, eliminando la necesidad de verificar response.ok y llamar a .json() manualmente.

Errores comunes

• No manejar estados de carga y error: Olvidar mostrar indicadores de carga o mensajes de error puede confundir a los usuarios. Siempre incluye estados para loading y error, como en los ejemplos anteriores.
• No verificar la respuesta de la API: Con Fetch, asumir que la respuesta siempre es exitosa sin chequear response.ok puede llevar a errores silenciosos. Usa condicionales o maneja excepciones con try-catch.
• No usar useEffect correctamente: Llamar fetch directamente en el cuerpo del componente causa bucles infinitos. Envuelve las solicitudes en useEffect con dependencias adecuadas para controlar cuándo se ejecutan.
• Olvidar permisos de red en Expo: Para ciertas APIs o en modo desarrollo, puede necesitarse configurar permisos en app.json. Revisa la documentación de Expo si encuentras problemas de conexión.
• No optimizar solicitudes: Hacer múltiples llamadas API innecesarias puede ralentizar la app. Usa técnicas como debouncing o caching para mejorar el rendimiento.

Checklist de dominio

1. Puedo realizar una solicitud GET a una API REST usando Fetch en React Native.
2. Puedo realizar una solicitud GET a una API REST usando Axios en React Native.
3. Sé manejar estados de carga, error y éxito al consumir una API.
4. Puedo enviar datos a una API usando métodos POST o PUT con headers JSON.
5. Comprendo cuándo usar Fetch vs. Axios basado en las necesidades del proyecto.
6. Sé cómo debuggear problemas comunes de red en Expo, como errores de CORS o timeouts.
7. Puedo integrar datos de API en componentes de UI como FlatList o ScrollView.

Crear una app de lista de tareas con API REST

En este ejercicio, desarrollarás una app de lista de tareas que consume una API REST para gestionar tareas. Sigue estos pasos:

1. Configuración inicial: Crea un nuevo proyecto Expo usando npx create-expo-app TaskApp. Instala Axios con npm install axios.
2. Diseña la interfaz: Crea un componente principal con:
   • Un campo de texto para añadir nuevas tareas.
   • Un botón para enviar la tarea a la API.
   • Una lista para mostrar las tareas existentes.
   • Botones para marcar tareas como completadas o eliminarlas.
3. Integra la API: Usa la API pública JSONPlaceholder (https://jsonplaceholder.typicode.com/todos). Implementa:
   • Función para obtener tareas (GET) al cargar la app.
   • Función para añadir una tarea (POST) al enviar el formulario.
   • Función para actualizar una tarea como completada (PUT).
   • Función para eliminar una tarea (DELETE).
   Usa Axios para todas las solicitudes.
4. Maneja estados: Añade estados de loading y error. Muestra un indicador de carga al hacer solicitudes y mensajes de error si fallan.
5. Prueba la app: Ejecuta la app con npx expo start y prueba todas las funcionalidades en un emulador o dispositivo real.

Entrega: Proporciona el código completo del componente principal y una captura de pantalla de la app funcionando.

Pistas

• Usa useState para manejar la lista de tareas y el texto de entrada.
• Recuerda que JSONPlaceholder es una API de prueba; los cambios no se persisten, pero simulan respuestas reales.
• Para el botón de eliminar, usa el ID de la tarea en la URL, ej: axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`).

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.