Introducción

En esta lección, aprenderemos a utilizar Axios, una biblioteca popular para realizar solicitudes HTTP en aplicaciones React Native. Axios es conocido por su simplicidad y facilidad de uso, y ofrece una API más limpia y poderosa en comparación con la API Fetch nativa.

Objetivos de Aprendizaje

Comprender qué es Axios y por qué es útil.
Aprender a instalar y configurar Axios en un proyecto React Native.
Realizar solicitudes HTTP GET y POST utilizando Axios.
Manejar respuestas y errores de solicitudes HTTP.
Implementar ejemplos prácticos para reforzar los conceptos.

¿Qué es Axios?

Axios es una biblioteca basada en promesas para realizar solicitudes HTTP. Es compatible con navegadores y Node.js, y ofrece una API simple y limpia para manejar solicitudes y respuestas HTTP.

Ventajas de Axios

Basado en Promesas: Facilita el manejo de operaciones asíncronas.
Intercepción de Solicitudes y Respuestas: Permite modificar solicitudes o respuestas antes de que sean manejadas.
Transformación de Datos: Permite transformar datos de solicitudes y respuestas.
Cancelación de Solicitudes: Soporta la cancelación de solicitudes.
Compatibilidad con JSON: Automáticamente convierte datos JSON.

Instalación de Axios

Para instalar Axios en tu proyecto React Native, puedes usar npm o yarn:

npm install axios

yarn add axios

Realizando Solicitudes HTTP con Axios

Solicitud GET

Una solicitud GET se utiliza para obtener datos de un servidor. Aquí hay un ejemplo básico de cómo realizar una solicitud GET con Axios:

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

const App = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        setError(error);
      });
  }, []);

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

  if (!data) {
    return (
      <View style={styles.container}>
        <Text style={styles.loadingText}>Loading...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{data.title}</Text>
      <Text style={styles.body}>{data.body}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  body: {
    fontSize: 16,
  },
  loadingText: {
    fontSize: 18,
  },
  errorText: {
    fontSize: 18,
    color: 'red',
  },
});

export default App;

Explicación del Código

Importaciones: Importamos axios y los componentes necesarios de React y React Native.
Estado: Utilizamos useState para manejar el estado de los datos y los errores.
Efecto: Utilizamos useEffect para realizar la solicitud GET cuando el componente se monta.
Solicitud GET: Realizamos la solicitud GET a https://jsonplaceholder.typicode.com/posts/1.
Manejo de Respuesta: Si la solicitud es exitosa, actualizamos el estado con los datos recibidos.
Manejo de Errores: Si ocurre un error, actualizamos el estado con el error.
Renderizado Condicional: Mostramos un mensaje de carga, los datos o un mensaje de error según el estado.

Solicitud POST

Una solicitud POST se utiliza para enviar datos a un servidor. Aquí hay un ejemplo básico de cómo realizar una solicitud POST con Axios:

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

const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  const handleSubmit = () => {
    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: title,
      body: body,
    })
    .then(response => {
      setResponse(response.data);
    })
    .catch(error => {
      setError(error);
    });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Title"
        value={title}
        onChangeText={setTitle}
      />
      <TextInput
        style={styles.input}
        placeholder="Body"
        value={body}
        onChangeText={setBody}
      />
      <Button title="Submit" onPress={handleSubmit} />
      {response && (
        <View style={styles.responseContainer}>
          <Text style={styles.responseText}>Response: {JSON.stringify(response)}</Text>
        </View>
      )}
      {error && (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>Error: {error.message}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
  responseContainer: {
    marginTop: 16,
  },
  responseText: {
    fontSize: 16,
  },
  errorContainer: {
    marginTop: 16,
  },
  errorText: {
    fontSize: 16,
    color: 'red',
  },
});

export default App;

Explicación del Código

Importaciones: Importamos axios y los componentes necesarios de React y React Native.
Estado: Utilizamos useState para manejar el estado del título, el cuerpo, la respuesta y los errores.
Manejo de Entrada: Utilizamos TextInput para capturar el título y el cuerpo del usuario.
Solicitud POST: Realizamos la solicitud POST a https://jsonplaceholder.typicode.com/posts con los datos del título y el cuerpo.
Manejo de Respuesta: Si la solicitud es exitosa, actualizamos el estado con la respuesta recibida.
Manejo de Errores: Si ocurre un error, actualizamos el estado con el error.
Renderizado Condicional: Mostramos la respuesta o un mensaje de error según el estado.

Ejercicio Práctico

Ejercicio

Crea una aplicación React Native que realice una solicitud GET a la API de GitHub para obtener información sobre un usuario específico. La aplicación debe permitir al usuario ingresar un nombre de usuario de GitHub y mostrar la información del usuario (nombre, biografía, número de repositorios, etc.).

Solución

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

const App = () => {
  const [username, setUsername] = useState('');
  const [userData, setUserData] = useState(null);
  const [error, setError] = useState(null);

  const handleSearch = () => {
    axios.get(`https://api.github.com/users/${username}`)
      .then(response => {
        setUserData(response.data);
        setError(null);
      })
      .catch(error => {
        setError(error);
        setUserData(null);
      });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="GitHub Username"
        value={username}
        onChangeText={setUsername}
      />
      <Button title="Search" onPress={handleSearch} />
      {userData && (
        <View style={styles.userDataContainer}>
          <Text style={styles.userDataText}>Name: {userData.name}</Text>
          <Text style={styles.userDataText}>Bio: {userData.bio}</Text>
          <Text style={styles.userDataText}>Public Repos: {userData.public_repos}</Text>
        </View>
      )}
      {error && (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>Error: {error.message}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
  userDataContainer: {
    marginTop: 16,
  },
  userDataText: {
    fontSize: 16,
  },
  errorContainer: {
    marginTop: 16,
  },
  errorText: {
    fontSize: 16,
    color: 'red',
  },
});

export default App;

Explicación del Código

Importaciones: Importamos axios y los componentes necesarios de React y React Native.
Estado: Utilizamos useState para manejar el estado del nombre de usuario, los datos del usuario y los errores.
Manejo de Entrada: Utilizamos TextInput para capturar el nombre de usuario de GitHub.
Solicitud GET: Realizamos la solicitud GET a https://api.github.com/users/${username} con el nombre de usuario ingresado.
Manejo de Respuesta: Si la solicitud es exitosa, actualizamos el estado con los datos del usuario.
Manejo de Errores: Si ocurre un error, actualizamos el estado con el error.
Renderizado Condicional: Mostramos los datos del usuario o un mensaje de error según el estado.

Conclusión

En esta lección, hemos aprendido a utilizar Axios para realizar solicitudes HTTP en aplicaciones React Native. Hemos cubierto cómo realizar solicitudes GET y POST, manejar respuestas y errores, y hemos implementado ejemplos prácticos para reforzar los conceptos. Con esta base, estarás mejor preparado para manejar la comunicación con servidores en tus aplicaciones React Native.

En la próxima lección, aprenderemos sobre el manejo de errores de red para hacer nuestras aplicaciones más robustas y resilientes.

Usando Axios para Solicitudes HTTP

Introducción

Objetivos de Aprendizaje

¿Qué es Axios?

Ventajas de Axios

Instalación de Axios

Realizando Solicitudes HTTP con Axios

Solicitud GET

Explicación del Código

Solicitud POST

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

Explicación del Código

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