Guías Técnicas

Uso de API con Fetch en React Native

  ¿Qué es fetch y cómo se usa?

El método fetch permite realizar solicitudes HTTP para obtener datos desde una API o enviar información a un servidor. En React Native, fetch es una forma común de interactuar con APIs externas.

Estructura Básica del Uso de fetch

El método fetch recibe como argumento la URL de la API que deseas consultar. Devuelve una promesa que, cuando se resuelve, contiene la respuesta de la API. Usualmente, esta respuesta se maneja como un JSON.

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

const ApiExample = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// Función para obtener datos de la API
const fetchData = async () => {
  try {
    const response = await fetch('https://devsapihub.com/api-users');
    if (!response.ok) throw new Error('Error en la respuesta del servidor');
    
    const json = await response.json();
    setData(json);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

// Llamada a la función fetchData al montar el componente
useEffect(() => {
  fetchData();
}, []);

// Renderizado condicional basado en el estado
if (loading) {
  return (
    <View style={styles.centered}>
      <ActivityIndicator size="large" color="#007AFF" />
      <Text style={styles.loadingText}>Cargando usuarios...</Text>
    </View>
  );
}

if (error) {
  return (
    <View style={styles.centered}>
      <Text style={styles.errorText}>Error: {error}</Text>
    </View>
  );
}

// Renderizado de la lista de usuarios
return (
  <FlatList
    data={data}
    keyExtractor={(item) => item.id.toString()}
    contentContainerStyle={styles.listContainer}
    renderItem={({ item }) => (
      <View style={styles.card}>
        <Image source={{ uri: item.avatar_url }} style={styles.avatar} />
        <View style={styles.cardContent}>
          <Text style={styles.name}>{item.name}</Text>
          <Text style={styles.email}>{item.email}</Text>
        </View>
      </View>
    )}
  />
);
};

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: '#555',
  },
  errorText: {
    color: 'red',
    fontSize: 16,
  },
  listContainer: {
    padding: 10,
  },
  card: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    padding: 15,
    marginBottom: 10,
    elevation: 4, // Android shadow
    shadowColor: '#000', // iOS shadow
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    alignItems: 'center',
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 15,
    backgroundColor: '#eee',
  },
  cardContent: {
    flex: 1,
  },
  name: {
    fontSize: 18,
    fontWeight: '600',
    color: '#222',
  },
  email: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
});

export default ApiExample;


Explicación del Ejemplo

  1. useState: Se usa para manejar los estados data, loading y error.

    • data: Contendrá los datos obtenidos de la API.
    • loading: Determina si se está cargando la información.
    • error: Almacena cualquier error que ocurra durante la obtención de los datos.

  2. useEffect: Este hook se ejecuta una vez al montarse el componente y hace la llamada a la API usando fetch.

  3. fetch('https://devsapihub.com/api-users'): Realiza la solicitud HTTP a la API.

    • Si la respuesta no es exitosa (response.ok es false), se lanza un error.
    • Si la solicitud es exitosa, los datos se convierten en JSON y se almacenan en el estado data.

  4. Manejo de Estados:

    • loading: Muestra un indicador de carga mientras los datos se están obteniendo.
    • error: Si ocurre un error, se muestra un mensaje con el error.
    • FlatList: Muestra los datos obtenidos de la API, con un keyExtractor para manejar de forma única cada elemento y renderItem para mostrar cada ítem de la lista.
  Consideraciones Importantes

  • fetch es asíncrono: Esto significa que, cuando realizas una solicitud, no puedes esperar a que se complete antes de continuar con el flujo de tu programa. Usa await para esperar la respuesta.
  • Manejo de errores: Siempre es importante manejar posibles errores al hacer solicitudes, como en este ejemplo con el bloque try-catch.
  • Mostrar el estado de carga: Mientras los datos se están cargando, es importante mostrar algo como un ActivityIndicator para indicar que la operación está en progreso.
  • Evitar el renderizado antes de recibir los datos: Usa un estado de loading para controlar qué mostrar antes y después de obtener los datos.

  fetch

El uso de fetch en React Native te permite obtener datos de una API de manera sencilla. Puedes manejar el proceso de carga, errores y mostrar la información utilizando los hooks de estado. Es una herramienta poderosa y eficiente para interactuar con APIs externas en tus aplicaciones móviles.