Cómo hacer solicitudes GET con Axios: Una guía para principiantes

Cuando se construyen aplicaciones web, obtener datos de una API es una tarea común. Los desarrolladores de JavaScript a menudo comienzan con el método integrado fetch(), pero pronto se encuentran con problemas, como tener que analizar manualmente las respuestas JSON y un manejo de errores engorroso. Axios simplifica la realización de solicitudes HTTP, especialmente las solicitudes GET, ofreciendo análisis automático de JSON, mejor manejo de errores y una personalización de solicitudes más sencilla.

¿Qué es Axios?

Axios es una biblioteca de JavaScript popular para realizar solicitudes HTTP en navegadores y Node.js. A diferencia del integrado fetch(), Axios analiza automáticamente las respuestas JSON, trata los errores HTTP de manera consistente y admite características convenientes como la cancelación de solicitudes y tiempos de espera.

Instalando Axios

Puedes instalar Axios usando npm, Yarn o incluirlo a través de CDN:

npm

npm install axios

Yarn

yarn add axios

CDN

<script src=""https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js""></script>

Importa Axios a tu proyecto:

import axios from 'axios';
// o
const axios = require('axios');

Realizando una solicitud GET básica

Así es como puedes hacer fácilmente una solicitud GET básica:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axios maneja automáticamente la obtención y el análisis de respuestas JSON.

Manejando datos de respuesta

Con Axios, no necesitas pasos adicionales de análisis. La respuesta devuelta contiene una propiedad data, ya en formato de objeto JavaScript:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log(res.data.title);  // Imprime el título de la respuesta
  });

Manejo de errores en solicitudes GET de Axios

Axios maneja los errores de manera intuitiva, capturando tanto problemas HTTP como de red. Así es como puedes gestionar estos errores claramente:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('Error HTTP:', error.response.status);
    } else if (error.request) {
      console.error('Sin respuesta:', error.request);
    } else {
      console.error('Error de configuración de solicitud:', error.message);
    }
  });

Usando parámetros de consulta en solicitudes GET de Axios

Enviar parámetros de consulta con Axios es fácil:

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: { userId: 1 }
})
.then(response => {
  console.log(response.data);
});

Axios formatea automáticamente estos parámetros en una cadena de consulta.

Usando Async/Await con Axios

La sintaxis Async/Await hace que las solicitudes de Axios sean más legibles:

async function fetchPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchPosts();

Esto hace que tu código sea más simple y limpio.

Configurando encabezados en solicitudes GET de Axios

Puedes configurar encabezados (como tokens de autenticación) fácilmente:

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN'
  }
})
.then(response => {
  console.log(response.data);
});

Esto te permite incluir encabezados personalizados sin esfuerzo.

Realizando múltiples solicitudes GET con Axios

Si necesitas varias solicitudes al mismo tiempo, Axios lo simplifica:

const request1 = axios.get('https://jsonplaceholder.typicode.com/posts');
const request2 = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([request1, request2])
  .then(([posts, users]) => {
    console.log('Posts:', posts.data);
    console.log('Users:', users.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

El manejo de solicitudes simultáneas de Axios mantiene tu código eficiente.

Conclusión

Axios simplifica las solicitudes HTTP GET en JavaScript, eliminando tareas tediosas como el análisis JSON y el complicado manejo de errores. Ya sea que estés enviando solicitudes simples, usando parámetros de consulta, encabezados personalizados o realizando múltiples solicitudes concurrentes, Axios te ayuda a escribir código más limpio y mantenible.

Preguntas frecuentes