El consumo de APIs externas es una tarea común en aplicaciones React. Para ello, podemos usar el método fetch o la biblioteca axios. Además, es importante manejar los estados de carga, éxito y error para mejorar la experiencia del usuario.

1. Uso de fetch y axios para consumir APIs

fetch es un método nativo de JavaScript que nos permite hacer peticiones HTTP. Es sencillo y adecuado para peticiones básicas.

Ejemplo de fetch:

1import React, { useState, useEffect } from 'react';
2
3function App() {
4  const [data, setData] = useState(null);
5
6  useEffect(() => {
7    fetch('https://api.example.com/data')
8      .then((response) => response.json())
9      .then((data) => setData(data))
10      .catch((error) => console.error("Error al obtener datos:", error));
11  }, []);
12
13  return <div>{data ? JSON.stringify(data) : "Cargando..."}</div>;
14}
15
16export default App;

En este ejemplo:

• fetch obtiene los datos y los convierte a JSON.
• data se actualiza con los datos de la API y se muestra en pantalla.

axios es una biblioteca popular que simplifica el uso de peticiones HTTP y proporciona configuraciones adicionales. Necesitamos instalarlo antes de usarlo:

1npm install axios

Ejemplo de axios:

1import React, { useState, useEffect } from 'react';
2import axios from 'axios';
3
4function App() {
5  const [data, setData] = useState(null);
6
7  useEffect(() => {
8    axios.get('https://api.example.com/data')
9      .then((response) => setData(response.data))
10      .catch((error) => console.error("Error al obtener datos:", error));
11  }, []);
12
13  return <div>{data ? JSON.stringify(data) : "Cargando..."}</div>;
14}
15
16export default App;

axios permite manejar fácilmente las configuraciones de la petición, como encabezados o tiempo de espera, y convierte automáticamente la respuesta a JSON.

2. Estados de carga, éxito y error

Al consumir una API, nuestra aplicación debe mostrar al usuario:

• Estado de carga: mientras esperamos la respuesta.
• Estado de éxito: cuando obtenemos los datos.
• Estado de error: si ocurre un problema.

Ejemplo de manejo de estados de carga, éxito y error:

1import React, { useState, useEffect } from 'react';
2import axios from 'axios';
3
4function DatosAPI() {
5  const [data, setData] = useState(null);
6  const [loading, setLoading] = useState(true);
7  const [error, setError] = useState(null);
8
9  useEffect(() => {
10    axios.get('https://api.example.com/data')
11      .then((response) => {
12        setData(response.data);
13        setLoading(false);
14      })
15      .catch((error) => {
16        setError("Error al cargar los datos");
17        setLoading(false);
18      });
19  }, []);
20
21  if (loading) return <p>Cargando...</p>;
22  if (error) return <p>{error}</p>;
23
24  return <div>{JSON.stringify(data)}</div>;
25}
26
27export default DatosAPI;

En este ejemplo:

• loading indica si los datos están en proceso de carga.
• error guarda el mensaje de error si algo falla.
• data contiene los datos en caso de éxito.

3. Ejercicio práctico: Aplicación de búsqueda de usuarios con API

Vamos a crear una aplicación en React que busque usuarios en la API de GitHub. La aplicación tendrá:

1. Un campo de entrada para ingresar el nombre de usuario.
2. Un botón para buscar.
3. Muestra los resultados, junto con el estado de carga y errores.

Código completo de la aplicación de búsqueda de usuarios:

1import React, { useState } from 'react';
2import axios from 'axios';
3
4function BusquedaUsuarios() {
5  const [usuario, setUsuario] = useState('');
6  const [datosUsuario, setDatosUsuario] = useState(null);
7  const [loading, setLoading] = useState(false);
8  const [error, setError] = useState(null);
9
10  const buscarUsuario = async () => {
11    setLoading(true);
12    setError(null);
13    setDatosUsuario(null);
14
15    try {
16      const response = await axios.get(`https://api.github.com/users/${usuario}`);
17      setDatosUsuario(response.data);
18    } catch (error) {
19      setError("Usuario no encontrado");
20    } finally {
21      setLoading(false);
22    }
23  };
24
25  return (
26    <div style={{ textAlign: 'center' }}>
27      <h1>Búsqueda de Usuarios de GitHub</h1>
28      <input
29        type="text"
30        value={usuario}
31        onChange={(e) => setUsuario(e.target.value)}
32        placeholder="Nombre de usuario de GitHub"
33      />
34      <button onClick={buscarUsuario}>Buscar</button>
35
36      {loading && <p>Cargando...</p>}
37      {error && <p style={{ color: 'red' }}>{error}</p>}
38      {datosUsuario && (
39        <div style={{ marginTop: '20px' }}>
40          <img src={datosUsuario.avatar_url} alt={datosUsuario.login} width="100" />
41          <h2>{datosUsuario.name}</h2>
42          <p>Seguidores: {datosUsuario.followers}</p>
43          <p>Siguiendo: {datosUsuario.following}</p>
44          <p>Repositorios: {datosUsuario.public_repos}</p>
45          <a href={datosUsuario.html_url} target="_blank" rel="noopener noreferrer">
46            Perfil de GitHub
47          </a>
48        </div>
49      )}
50    </div>
51  );
52}
53
54export default BusquedaUsuarios;

En este ejercicio:

1. Campos y estado:

   • usuario: guarda el nombre de usuario ingresado.
   • datosUsuario: contiene los datos del usuario de GitHub.
   • loading y error para manejar los estados de carga y errores.

2. Función buscarUsuario:

   • Esta función se llama al hacer clic en "Buscar". Intenta obtener datos del usuario con axios.get.
   • Si la búsqueda tiene éxito, datosUsuario se actualiza con los datos obtenidos.
   • Si falla, error muestra "Usuario no encontrado".

3. Renderización condicional:

   • Mientras se cargan los datos, muestra "Cargando...".
   • Si hay un error, muestra un mensaje de error en rojo.
   • Si la búsqueda es exitosa, muestra los datos del usuario: imagen, nombre, seguidores, seguidos y un enlace al perfil.

Este ejercicio muestra cómo integrar axios con React para crear una aplicación interactiva, optimizando la experiencia del usuario mediante el manejo de estados de carga, éxito y error.