Guías Técnicas

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

El uso de axios en React Native te permite consumir APIs de una manera más simple y con menos código que fetch. Su sintaxis más directa y su manejo automático de JSON lo convierten en una opción muy popular. Recuerda siempre manejar los estados de carga y errores para ofrecer una mejor experiencia al usuario.