Consumir APIs con Axios en React Native

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

axios es una librería basada en promesas que facilita la realización de solicitudes HTTP desde aplicaciones JavaScript, incluyendo proyectos en React Native. Es una alternativa más robusta y sencilla al uso de fetch, permitiendo un mejor manejo de errores, tiempo de espera, cabeceras y más.

🧱 Estructura Básica del Uso de `axios`

El método axios se utiliza para hacer solicitudes HTTP y obtener datos de una API. Al igual que fetch, axios también devuelve una promesa.

jsx

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

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

const fetchData = async () => {
  try {
    const response = await axios.get('https://devsapihub.com/api-users');
    setData(response.data);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

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

if (loading) {
  return <View style={styles.centered}><ActivityIndicator size="large" color="#0000ff" /></View>;
}

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

return (
  <FlatList
    data={data}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => (
      <View style={styles.userItem}>
        <Text style={styles.userName}>{item.name}</Text>
        <Text style={styles.userEmail}>{item.email}</Text>
      </View>
    )}
  />
);
};

const styles = StyleSheet.create({
centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
error: { color: 'red', fontSize: 18 },
userItem: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee' },
userName: { fontSize: 18, fontWeight: 'bold' },
userEmail: { fontSize: 14, color: '#666' },
});

export default ApiExample;

🧠 ¿Qué hace este código?

Importación de módulos: Incluye axios, componentes de React Native y hooks como useState y useEffect.
Estados (useState):
- data: almacena los datos obtenidos.
- loading: controla el estado de carga.
- error: gestiona errores durante la petición.
Llamada a la API (axios.get):
- Realiza una solicitud GET a https://devsapihub.com/api-users.
- Maneja la respuesta exitosa o el error en caso de fallo.
Interfaz de Usuario:
- Muestra un spinner (ActivityIndicator) mientras se cargan los datos.
- Muestra un mensaje de error si ocurre un problema.
- Renderiza los datos usando FlatList.

Ventajas de usar Axios

Sintaxis más limpia que fetch.
Interceptores para respuestas y errores.
Soporte para cancelación de solicitudes.
Manejo automático de conversiones JSON.

Resumen