El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos cómo manejar errores de red en React Native. El manejo adecuado de errores es crucial para crear aplicaciones robustas y ofrecer una buena experiencia de usuario. Veremos cómo detectar y gestionar errores al realizar solicitudes HTTP utilizando fetch y axios.

Conceptos Clave

Errores de Red Comunes:
- Errores de Conexión: Ocurren cuando no se puede establecer una conexión con el servidor.
- Errores de Respuesta: Ocurren cuando el servidor responde con un código de estado HTTP que indica un error (por ejemplo, 404, 500).
- Errores de Tiempo de Espera: Ocurren cuando una solicitud tarda demasiado en completarse.
Manejo de Errores con fetch:
- fetch es una API nativa de JavaScript para realizar solicitudes HTTP. No lanza errores para respuestas HTTP no exitosas (como 404 o 500), por lo que debemos manejar estos casos manualmente.
Manejo de Errores con axios:
- axios es una biblioteca popular para realizar solicitudes HTTP. A diferencia de fetch, axios lanza errores para respuestas HTTP no exitosas, lo que facilita el manejo de errores.

Ejemplo Práctico con `fetch`

Código de Ejemplo

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

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

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

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

  if (error) {
    return (
      <View>
        <Text>Error: {error}</Text>
        <Button title="Retry" onPress={fetchData} />
      </View>
    );
  }

  return (
    <View>
      <Text>Data: {JSON.stringify(data)}</Text>
    </View>
  );
};

export default FetchExample;

Explicación

Estado Inicial:
- data: Almacena los datos obtenidos de la API.
- loading: Indica si la solicitud está en curso.
- error: Almacena cualquier error que ocurra durante la solicitud.
Función fetchData:
- Establece loading en true y error en null al inicio.
- Realiza la solicitud fetch y verifica si la respuesta es exitosa.
- Si la respuesta no es exitosa, lanza un error con el código de estado HTTP.
- Si la solicitud es exitosa, convierte la respuesta a JSON y actualiza el estado data.
- En caso de error, actualiza el estado error con el mensaje de error.
- Finalmente, establece loading en false.
Renderizado Condicional:
- Muestra un indicador de carga mientras loading es true.
- Muestra un mensaje de error y un botón de reintento si error no es null.
- Muestra los datos obtenidos si data no es null.

Ejemplo Práctico con `axios`

Código de Ejemplo

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

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

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

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

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

  if (error) {
    return (
      <View>
        <Text>Error: {error}</Text>
        <Button title="Retry" onPress={fetchData} />
      </View>
    );
  }

  return (
    <View>
      <Text>Data: {JSON.stringify(data)}</Text>
    </View>
  );
};

export default AxiosExample;

Explicación

Estado Inicial:
- Similar al ejemplo con fetch.
Función fetchData:
- Similar al ejemplo con fetch, pero utiliza axios para realizar la solicitud.
- axios lanza un error automáticamente si la respuesta HTTP no es exitosa, lo que simplifica el manejo de errores.
Renderizado Condicional:
- Similar al ejemplo con fetch.

Ejercicio Práctico

Ejercicio

Crea una nueva pantalla en tu aplicación React Native.
Utiliza fetch o axios para realizar una solicitud a una API pública de tu elección.
Implementa el manejo de errores para mostrar un mensaje de error y un botón de reintento si la solicitud falla.
Muestra un indicador de carga mientras la solicitud está en curso.
Muestra los datos obtenidos de la API si la solicitud es exitosa.

Solución

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

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

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await axios.get('https://api.publicapis.org/entries');
      setData(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

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

  if (error) {
    return (
      <View>
        <Text>Error: {error}</Text>
        <Button title="Retry" onPress={fetchData} />
      </View>
    );
  }

  return (
    <View>
      <Text>Data: {JSON.stringify(data)}</Text>
    </View>
  );
};

export default MyApiScreen;

Retroalimentación

Errores Comunes:
- No verificar si la respuesta HTTP es exitosa al usar fetch.
- No manejar errores de red adecuadamente, lo que puede llevar a una mala experiencia de usuario.
- No mostrar un indicador de carga mientras se realiza la solicitud.
Consejos:
- Siempre verifica el estado de la respuesta HTTP al usar fetch.
- Utiliza axios para simplificar el manejo de errores.
- Proporciona retroalimentación visual al usuario mientras se realiza la solicitud (por ejemplo, un indicador de carga).

Conclusión

En esta lección, hemos aprendido cómo manejar errores de red en React Native utilizando fetch y axios. El manejo adecuado de errores es esencial para crear aplicaciones robustas y ofrecer una buena experiencia de usuario. En la próxima lección, exploraremos cómo utilizar AsyncStorage para almacenar datos localmente en la aplicación.

Manejo de Errores de Red

Conceptos Clave

Ejemplo Práctico con `fetch`

Código de Ejemplo

Explicación

Ejemplo Práctico con `axios`

Código de Ejemplo

Explicación

Ejercicio Práctico

Ejercicio

Solución

Retroalimentación

Conclusión

Curso de React Native

Módulo 1: Introducción a React Native

Módulo 2: Componentes Básicos y Estilizado

Módulo 3: Estado y Ciclo de Vida

Módulo 4: Navegación

Módulo 5: Redes y Datos

Módulo 6: Conceptos Avanzados

Módulo 7: Despliegue y Publicación

Módulo 8: Proyectos del Mundo Real

Manejo de Errores de Red

Conceptos Clave

Ejemplo Práctico con fetch

Código de Ejemplo

Explicación

Ejemplo Práctico con axios

Código de Ejemplo

Explicación

Ejercicio Práctico

Ejercicio

Solución

Retroalimentación

Conclusión

Curso de React Native

Módulo 1: Introducción a React Native

Módulo 2: Componentes Básicos y Estilizado

Módulo 3: Estado y Ciclo de Vida

Módulo 4: Navegación

Módulo 5: Redes y Datos

Módulo 6: Conceptos Avanzados

Módulo 7: Despliegue y Publicación

Módulo 8: Proyectos del Mundo Real

Ejemplo Práctico con `fetch`

Ejemplo Práctico con `axios`