Cómo realizar solicitudes HTTP con Axios en 2025

Axios es una biblioteca popular de JavaScript que simplifica el proceso de realizar peticiones HTTP desde una aplicación web. Proporciona una interfaz fácil de usar para enviar y recibir datos de APIs, y es ampliamente utilizada por desarrolladores de todo el mundo.

En esta entrada de blog, vamos a hablar sobre cómo realizar peticiones HTTP con Axios, una biblioteca popular de JavaScript para realizar peticiones HTTP, y proporcionaremos ejemplos de código para demostrar su uso, luego proporcionaremos algunos consejos y trucos para generar tu código usando Apidog.

💡

Apidog simplificará el proceso de generar y probar APIs, tu desarrollo será más eficiente, así que haz clic en el botón de descarga de abajo para usar Apidog de forma completamente gratuita.

button

Tanto si eres un desarrollador experimentado como si estás empezando con el desarrollo web, esta entrada te proporcionará el conocimiento que necesitas para usar Axios de forma efectiva y eficiente. ¡Así que, empecemos!

¿Qué es Axios?

Axios es una biblioteca de JavaScript que te permite realizar peticiones HTTP desde tu código JavaScript. Es una biblioteca basada en promesas que proporciona una interfaz fácil de usar para realizar peticiones HTTP. Axios es ampliamente utilizado en la comunidad JavaScript y es conocido por su simplicidad y flexibilidad. Axios es una API HTTP de cliente basada en la interfaz XMLHttpRequest proporcionada por los navegadores.

¿Por qué usar Axios?

Axios proporciona varias ventajas sobre otras bibliotecas HTTP. Aquí hay algunas razones por las que deberías usar Axios:

Basado en promesas: Axios está basado en promesas, lo que facilita el manejo de operaciones asíncronas. Esto significa que puedes usar la sintaxis async/await para hacer que tu código sea más legible y fácil de mantener.
Interfaz simple e intuitiva: Axios proporciona una interfaz simple e intuitiva para realizar peticiones HTTP. Puedes usar los métodos axios.get(), axios.post(), axios.put() y axios.delete() para realizar peticiones GET, POST, PUT y DELETE respectivamente.
Transformación automática de datos JSON: Axios transforma automáticamente los datos JSON por ti, lo que facilita el trabajo con APIs que devuelven datos JSON.
Soporte para navegadores antiguos: Axios proporciona varias características que facilitan el trabajo con navegadores antiguos. Por ejemplo, proporciona soporte para XMLHttpRequest, que es utilizado por navegadores antiguos para realizar peticiones HTTP.
Buenas opciones predeterminadas: Axios tiene buenas opciones predeterminadas para trabajar con datos JSON. A diferencia de alternativas como la Fetch API, a menudo no necesitas establecer tus cabeceras o realizar tareas tediosas como convertir el cuerpo de tu petición a una cadena JSON.
Mejor manejo de errores: Axios lanza errores de rango 400 y 500 por ti. A diferencia de la Fetch API, donde tienes que comprobar el código de estado y lanzar el error tú mismo.
Interceptores: Axios proporciona interceptores que te permiten interceptar peticiones o respuestas antes de que sean manejadas por then o catch.

Instalando Axios

Para instalar Axios, puedes usar el gestor de paquetes de Node.js (npm) o yarn. Aquí te mostramos cómo instalar Axios usando npm:

npm install axios

Y aquí te mostramos cómo instalar Axios usando yarn:

yarn add axios

Si prefieres usar pnpm, puedes instalar Axios usando el siguiente comando:

pnpm install axios

Alternativamente, puedes usar una red de entrega de contenido (CDN) para incluir Axios en tu proyecto. Aquí te mostramos cómo incluir Axios usando una CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Una vez que hayas instalado Axios, puedes empezar a realizar peticiones HTTP con él. Axios proporciona una interfaz simple e intuitiva para realizar peticiones HTTP. Puedes usar los métodos axios.get(), axios.post(), axios.put() y axios.delete() para realizar peticiones GET, POST, PUT y DELETE respectivamente.

Realizando peticiones HTTP con Axios

Ahora que tenemos Axios instalado, echemos un vistazo a cómo realizar peticiones HTTP con Axios. Axios proporciona varios métodos para realizar peticiones HTTP, incluyendo GET, POST, PUT y DELETE.

Cómo realizar una petición GET con Axios

Enviar una petición HTTP con Axios es sencillo; simplemente pasas un objeto de configuración a la función axios. Para enviar una petición GET con Axios, puedes usar el método axios.get(). Aquí hay un ejemplo de cómo usarlo:

axios.get('https://your-api-endpoint.com')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

En este ejemplo, axios.get() se usa para enviar una petición GET al punto final de la API especificado. El método .then() se usa para manejar la respuesta del servidor, mientras que el método .catch() se usa para manejar cualquier error que pueda ocurrir durante la petición.

Si necesitas pasar parámetros con tu petición GET, puedes hacerlo añadiéndolos a la URL. Por ejemplo:

axios.get('https://your-api-endpoint.com?param1=value1&param2=value2')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Aquí, param1 y param2 son los nombres de los parámetros que se están pasando, mientras que value1 y value2 son sus respectivos valores.

Enviando una petición POST con Axios

Cuando usas Axios para realizar una petición POST, puedes "publicar" datos en un punto final específico y activar eventos. Para realizar una petición POST con Axios, puedes usar el método axios.post(). Aquí hay un ejemplo:

axios.post('https://api.example.com/data', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

En este ejemplo, estamos enviando una petición POST a https://api.example.com/data. También estamos enviando algunos datos junto con la petición. Cuando la petición se completa, estamos registrando los datos de la respuesta en la consola. Si hay un error, estamos registrando el error en la consola.

Realizando una petición PUT con Axios

Para realizar una petición PUT con Axios, puedes usar el método axios.put(). Aquí hay un ejemplo de cómo usarlo:

axios.put('/api/article/123', {
  title: 'Making PUT Requests with Axios',
  status: 'published'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

En este ejemplo, axios.put() se usa para enviar una petición PUT al punto final de la API especificado. El método .then() se usa para manejar la respuesta del servidor, mientras que el método .catch() se usa para manejar cualquier error que pueda ocurrir durante la petición.

Si necesitas pasar parámetros con tu petición PUT, puedes hacerlo incluyéndolos en el cuerpo de la petición. Por ejemplo:

axios.put('/api/article/123', {
  title: 'Making PUT Requests with Axios',
  status: 'published',
  param1: 'value1',
  param2: 'value2'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Aquí, param1 y param2 son los nombres de los parámetros que se están pasando, mientras que value1 y value2 son sus respectivos valores.

¿Cómo enviar una petición DELETE con Axios?

Para enviar una petición DELETE con Axios, puedes usar el método axios.delete(). Aquí hay un ejemplo de cómo usarlo:

axios.delete('/api/article/123')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

En este ejemplo, axios.delete() se usa para enviar una petición DELETE al punto final de la API especificado. El método .then() se usa para manejar la respuesta del servidor, mientras que el método .catch() se usa para manejar cualquier error que pueda ocurrir durante la petición.

Si necesitas pasar parámetros con tu petición DELETE, puedes hacerlo incluyéndolos en el cuerpo de la petición. Por ejemplo:

axios.delete('/api/article/123', {
  data: {
    param1: 'value1',
    param2: 'value2'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Aquí, param1 y param2 son los nombres de los parámetros que se están pasando, mientras que value1 y value2 son sus respectivos valores.

Usando Axios con async y await

async y await son palabras clave de JavaScript que te permiten escribir código asíncrono en un estilo síncrono. Cuando usas async y await con Axios, puedes escribir código más limpio y legible.

Para usar Axios con async y await, puedes usar los métodos axios.get(), axios.put() y axios.delete(). Aquí hay ejemplos de cómo usarlos:

async function getData() {
  try {
    const response = await axios.get('https://your-api-endpoint.com');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function putData() {
  try {
    const response = await axios.put('/api/article/123', {
      title: 'Making PUT Requests with Axios',
      status: 'published'
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function deleteData() {
  try {
    const response = await axios.delete('/api/article/123', {
      data: {
        param1: 'value1',
        param2: 'value2'
      }
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

En estos ejemplos, axios.get(), axios.put() y axios.delete() se usan para enviar peticiones GET, PUT y DELETE a los puntos finales de la API especificados, respectivamente. El bloque try se usa para manejar la respuesta del servidor, mientras que el bloque catch se usa para manejar cualquier error que pueda ocurrir durante la petición.

Si necesitas pasar parámetros con tu petición GET o DELETE, puedes hacerlo añadiéndolos a la URL o incluyéndolos en el cuerpo de la petición, respectivamente. Por ejemplo:

async function getDataWithParams() {
  try {
    const response = await axios.get('https://your-api-endpoint.com?param1=value1&param2=value2');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function deleteDataWithParams() {
  try {
    const response = await axios.delete('/api/article/123', {
      data: {
        param1: 'value1',
        param2: 'value2'
      }
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Cuando utilizas la sintaxis async y await, es costumbre encerrar tu código dentro de un bloque try-catch. Este enfoque garantiza que manejes los errores de manera efectiva y ofrezcas retroalimentación para una experiencia de usuario mejorada.

Apidog: una herramienta gratuita para generar tu código Axios

Apidog es una plataforma de desarrollo de API colaborativa todo en uno que proporciona un conjunto de herramientas completo para diseñar, depurar, probar, publicar y simular APIs. Apidog te permite crear automáticamente código Axios para realizar peticiones HTTP.

button

Aquí está el proceso para usar Apidog para generar código Axios:

Paso 1: Abre Apidog y selecciona nueva petición

Paso 2: Introduce la URL del punto final de la API al que quieres enviar una petición, introduce cualquier cabecera o parámetro de cadena de consulta que desees incluir con la petición, luego haz clic en "Design" para cambiar a la interfaz de diseño de Apidog.

Paso 3: Selecciona "Generar código de cliente" para generar tu código.

Paso 4: Copia el código Axios generado y pégalo en tu proyecto.

Usando Apidog para Enviar Peticiones HTTP

Apidog ofrece varias características avanzadas que mejoran aún más su capacidad para probar peticiones HTTP. Estas características te permiten personalizar tus peticiones y manejar escenarios más complejos sin esfuerzo.

button

Paso 1: Abre Apidog y crea una nueva petición.

Paso 2: Encuentra o introduce manualmente los detalles de la API para la petición POST que quieres realizar.

Paso 3: Rellena los parámetros requeridos y cualquier dato que quieras incluir en el cuerpo de la petición.

Conclusión

Axios es muy favorecido por los desarrolladores por una buena razón. En este artículo, hemos cubierto cómo utilizar Axios para realizar peticiones HTTP. Hemos cubierto los conceptos básicos de Axios, incluyendo qué es, por qué deberías usarlo y cómo instalarlo.

Al comprender cómo realizar peticiones HTTP con Axios, puedes mejorar tus aplicaciones web. Con la ayuda de Axios y herramientas como Apidog, puedes agilizar el proceso de realizar peticiones HTPP y centrarte en la construcción de aplicaciones robustas y eficientes.

Usar Apidog no solo te ahorra tiempo y esfuerzo valiosos, sino que también garantiza que tu código sea preciso y esté libre de errores. Con su interfaz fácil de usar y sus características intuitivas, Apidog es una herramienta imprescindible para cualquier desarrollador que trabaje con peticiones Axios.

button