Axios para JavaScript (Node.js): guía completa con ejemplos

¿Qué es Axios y para qué sirve?

\n\n

Axios es una potente y popular biblioteca de JavaScript para realizar solicitudes HTTP. Funciona tanto en el navegador como en el entorno Node.js, proporcionando una API unificada y conveniente basada en Promise. Si necesita enviar una solicitud GET a una API, cargar datos en el servidor mediante POST o procesar una respuesta en formato JSON, Axios lo hará de manera elegante y eficiente.

\n\n

¿Por qué usar Axios en lugar del fetch incorporado o XMLHttpRequest?

\n

\n
• Procesamiento automático de JSON: Axios convierte automáticamente las respuestas a JSON, evitando la necesidad de llamar a response.json().
\n
• Interceptores (Interceptors): Puede agregar fácilmente lógica global para todas las solicitudes (por ejemplo, tokens de autorización) o respuestas (por ejemplo, manejo de errores).
\n
• Cancelación de solicitudes: Soporte integrado para cancelar solicitudes mediante AbortController.
\n
• Protección contra CSRF: Trabajo automático con tokens XSRF para mejorar la seguridad.
\n
• Progreso de carga: Posibilidad de rastrear el progreso del envío y recepción de datos.
\n
• Manejo conveniente de errores: Mensajes de error más informativos y la capacidad de distinguir fácilmente los estados de las respuestas.
\n
• Soporte para navegadores antiguos: A diferencia de fetch, Axios funciona en Internet Explorer 11 y otros navegadores obsoletos.
\n

\n\n

Instalación

\n\n

La instalación de Axios en un proyecto Node.js o proyecto frontend (a través de npm/yarn/pnpm) se realiza con un solo comando:

\n\n

# Instalación mediante npm (recomendado)\nnpm install axios\n\n# Instalación mediante yarn\nyarn add axios\n\n# Instalación mediante pnpm\npnpm add axios\n

\n\n

Para usar en el navegador, también puede incluir Axios a través de CDN:

\n\n

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

\n\n

Inicio rápido

\n\n

Después de la instalación, puede comenzar a hacer solicitudes de inmediato. Aquí hay un ejemplo simple de una solicitud GET a una API pública:

\n\n

// Importamos la biblioteca (para Node.js o proyectos modulares)\nimport axios from 'axios';\n\n// Hacemos una solicitud GET a la API de JSONPlaceholder\naxios.get('https://jsonplaceholder.typicode.com/posts/1')\n  .then(response => {\n    console.log('Estado de la respuesta:', response.status);\n    console.log('Datos:', response.data);\n  })\n  .catch(error => {\n    console.error('Error en la solicitud:', error.message);\n  });\n

\n\n

Este código enviará una solicitud GET, recibirá la respuesta y mostrará su estado y cuerpo (que ya se ha analizado automáticamente de JSON a un objeto de JavaScript).

\n\n

Métodos y funciones principales

\n\n

Axios proporciona métodos contenedores convenientes para todos los métodos HTTP principales. Cada uno de ellos devuelve una Promise.

\n\n

1. axios.get(url, config?)

\n

Qué hace: Realiza una solicitud HTTP GET para obtener datos del servidor.

\n

Parámetros:

\n

\n
• url (string) — Dirección URL de la solicitud.
\n
• config (object, opcional) — Objeto de configuración de Axios (por ejemplo, headers, params para la cadena de consulta, timeout).
\n

\n

Ejemplo:

\n

// Solicitud con parámetros de consulta\naxios.get('https://api.example.com/users', {\n  params: {\n    page: 2,\n    limit: 10\n  },\n  headers: {\n    'Authorization': 'Bearer my-token'\n  }\n})\n.then(response => {\n  console.log(response.data);\n});\n

\n\n

2. axios.post(url, data?, config?)

\n

Qué hace: Realiza una solicitud HTTP POST para enviar datos al servidor (generalmente para crear un nuevo recurso).