Axios vs Fetch: ¿Cuál es mejor para las peticiones HTTP?

Las peticiones HTTP son esenciales para comunicarse con servidores y APIs en aplicaciones web. Hay muchas maneras de hacer peticiones HTTP en JavaScript, pero dos de las más populares son Axios y fetch(). En esta publicación, compararemos y contrastaremos Axios y Fetch() y veremos cuál es mejor para diferentes escenarios.

button

¿Qué es Axios?

Axios es una librería de terceros que proporciona un cliente HTTP basado en promesas para hacer peticiones HTTP. Axios es ampliamente utilizado en la comunidad de JavaScript y es conocido por su simplicidad y flexibilidad.

Sintaxis básica de Axios

La sintaxis básica de la librería Axios es la siguiente:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Características clave:

Puede aceptar un objeto que contenga tanto la URL como la configuración como parámetro, o la URL y el objeto de configuración por separado.
Utiliza la propiedad data para enviar datos al servidor, manejando automáticamente la conversión a JSON.
Devuelve los datos del servidor directamente en la propiedad data del objeto de respuesta.
Maneja automáticamente los códigos de estado de error HTTP, pasándolos al bloque catch.
Proporciona un mecanismo de manejo de errores más ágil.

Ejemplo:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    key: 'value'
  }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('El servidor respondió con:', error.response.status);
    } else if (error.request) {
      console.error('No se recibió respuesta');
    } else {
      console.error('Error:', error.message);
    }
  });

¿Por qué deberías usar Axios?

Tiene muchas características que lo hacen fácil y conveniente de usar, tales como:

Transformación automática de datos JSON: Axios convierte automáticamente los datos a y desde JSON, por lo que no tienes que analizarlos o convertirlos en cadena manualmente.
Tiempo de espera de respuesta: Axios te permite establecer un tiempo de espera para tus peticiones, para que puedas manejar los errores si el servidor tarda demasiado en responder.
Interceptores HTTP: Axios te permite interceptar peticiones y respuestas antes de que sean manejadas por then o catch, para que puedas modificarlas o añadir lógica adicional.
Progreso de descarga: Axios puede rastrear el progreso de tus descargas y subidas, para que puedas mostrar retroalimentación al usuario o cancelar la petición si es necesario.
Peticiones simultáneas: Axios puede hacer múltiples peticiones al mismo tiempo y combinarlas en una sola respuesta usando axios.all y axios.spread.

¿Qué es Fetch()?

fetch() es una API incorporada que viene con JavaScript nativo. Es una API web asíncrona que devuelve los datos en forma de promesas. fetch() es compatible con todos los navegadores modernos, por lo que no necesitas importar ninguna librería externa para usarlo. Algunas de las características de fetch() son:

Sintaxis básica: fetch() tiene una sintaxis simple y concisa que toma la URL del recurso que quieres obtener como primer argumento y un objeto de opciones opcional como segundo argumento.
Compatibilidad con versiones anteriores: fetch() puede ser usado en navegadores más antiguos que no lo soportan usando un polyfill, como whatwg-fetch o fetch-ponyfill.
Personalizable: fetch() te da más control sobre tus peticiones y respuestas, ya que puedes personalizar las cabeceras, el cuerpo, el método, el modo, las credenciales, la caché, la redirección y las políticas de referencia.

¿Cómo usar Axios para hacer peticiones HTTP?

Para usar Axios, necesitas instalarlo usando npm o yarn:

npm install axios

Y aquí está 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í está cómo incluir Axios usando una CDN:

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

Luego, puedes importarlo en tu archivo JavaScript y usarlo para hacer peticiones HTTP. Por ejemplo, para hacer una petición GET a una URL, puedes usar axios.get():

import axios from 'axios';

axios.get('https://example.com/api')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Haciendo peticiones HTTP con Fetch

Para usar fetch(), no necesitas instalar nada, ya que ya está disponible en el navegador. Puedes usar la función fetch() para hacer peticiones HTTP. Por ejemplo, para hacer una petición GET a una URL, puedes usar fetch() así:

fetch('https://example.com/api')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Observa que:

Axios transforma automáticamente los datos a y desde JSON, mientras que fetch() requiere que llames a response.json() para analizar los datos a un objeto JavaScript.
Axios proporciona los datos en el objeto de respuesta, mientras que fetch() proporciona el objeto de respuesta en sí, que contiene otra información como el estado, las cabeceras y la url.
Axios maneja los errores en el bloque catch, mientras que fetch() solo rechaza la promesa si hay un error de red, no si la respuesta tiene un estado de error.

Sintaxis básica de Fetch

Ciertamente. Proporcionaré el contenido en inglés, organizado en dos partes separadas como se solicitó.

La sintaxis básica de la API Fetch es la siguiente:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Características clave:

URL como primer argumento, objeto de configuración opcional como segundo argumento.
Utiliza la propiedad body para enviar datos al servidor, requiriendo la conversión manual de los datos a cadena.
Devuelve un objeto Response que contiene información completa de la respuesta.
Solo entra en el bloque catch en errores de red, no en códigos de estado de error HTTP.
Requiere la verificación manual de los códigos de estado de la respuesta para manejar los errores HTTP.

Ejemplo:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Error HTTP ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios vs Fetch: Enviando una petición GET con parámetros de consulta:

// Axios
axios.get('/api/data', {
  params: {
    name: 'Alice',
    age: 25
  }
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: Enviando una petición POST con un cuerpo JSON:

// Axios
axios.post('/api/data', {
  name: 'Bob',
  age: 30
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 30
  })
})
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: Estableciendo un tiempo de espera para la petición:

// Axios
axios.get('/api/data', {
  timeout: 5000 // 5 seconds
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => {
  controller.abort(); // abort after 5 seconds
}, 5000);

fetch('/api/data', { signal })
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: Usando la sintaxis async/await:

// Axios
async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

// Fetch
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}

Axios vs Fetch: Compatibilidad con versiones anteriores

La compatibilidad con versiones anteriores se refiere a la capacidad de un sistema o aplicación más reciente para trabajar con versiones antiguas, asegurando una transición suave y la prevención de interrupciones o roturas al actualizar. Es crucial en el desarrollo de software, el desarrollo web y los ecosistemas tecnológicos para mantener la estabilidad, la compatibilidad y las versiones y plataformas consistentes.

Axios:

Axios es una librería de terceros que necesita ser instalada e incluida en tu proyecto.
Soporta navegadores más antiguos incluyendo polyfills para promesas y otras características modernas de JavaScript.
Axios se mantiene activamente y se mantiene al día con las últimas actualizaciones del navegador y Node.js, asegurando la compatibilidad con nuevos entornos.
Sin embargo, dado que es una librería separada, necesitas asegurarte de que estás usando una versión compatible con las dependencias de tu proyecto.

Fetch:

La API Fetch es una API web nativa soportada por los navegadores modernos.
Tiene un excelente soporte en las versiones recientes del navegador, pero los navegadores más antiguos (como Internet Explorer) no lo soportan de forma nativa.
Si necesitas soportar navegadores más antiguos, necesitarás incluir un polyfill o usar una solución de respaldo (por ejemplo, XMLHttpRequest).
Dado que es una API nativa, se actualiza y mantiene automáticamente por los proveedores de navegadores, asegurando la compatibilidad con futuras versiones del navegador.

Axios vs Fetch: Manejo de errores

El manejo de errores es un aspecto importante al hacer peticiones HTTP, ya que te permite manejar diferentes escenarios como fallos de red, errores del servidor o respuestas inválidas. Fetch y Axios tienen diferentes maneras de manejar los errores, que compararé con algunos ejemplos.

Axios:

En Axios, si hay un fallo en la petición, lanza un error y puedes manejar fácilmente el error con un bloque try-catch y obtener los datos del error de error.response.data. Por ejemplo:

// Manejo de errores de Axios con try-catch
try {
  const response = await axios.get('/api/data');
  // manejar la respuesta
} catch (error) {
  // manejar el error
  console.log(error.response.data);
}

Fetch:

En Fetch, si hay un fallo en la petición, no lanza un error, sino que devuelve un objeto de respuesta con una propiedad ok establecida en falso. Tienes que comprobar la propiedad ok y lanzar un error manualmente si quieres usar un bloque try-catch.

Alternativamente, puedes usar la propiedad response.ok para manejar diferentes casos en el método then. Por ejemplo:

// Manejo de errores de Fetch con try-catch
try {
  const response = await fetch('/api/data');
  // comprobar el estado de la respuesta
  if (!response.ok) {
    // lanzar un error si el estado no es ok
    throw new Error(`¡Error HTTP! estado: ${response.status}`);
  }
  // manejar la respuesta
} catch (error) {
  // manejar el error
  console.log(error.message);
}

// Manejo de errores de Fetch con response.ok
fetch('/api/data')
  .then(response => {
    // comprobar el estado de la respuesta
    if (response.ok) {
      // manejar la respuesta
    } else {
      // manejar el error
      console.log(`¡Error HTTP! estado: ${response.status}`);
    }
  })
  .catch(error => {
    // manejar el error de red
    console.log(error.message);
  });

Otra diferencia entre Fetch y Axios es cómo manejan los códigos de estado que no son 200. Axios considera cualquier código de estado fuera del rango de 2xx como un error y rechaza la promesa. Fetch considera cualquier respuesta HTTP válida (incluso 4xx o 5xx) como un éxito y resuelve la promesa.

Esto significa que tienes que manejar los códigos de estado que no son 200 de manera diferente en Fetch y Axios. Por ejemplo:

// Manejo de errores de Axios para códigos de estado que no son 200
axios.get('/api/data')
  .then(response => {
    // manejar la respuesta
  })
  .catch(error => {
    // manejar el error
    if (error.response) {
      // el servidor respondió con un código de estado fuera de 2xx
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      // error de red o la petición fue abortada
      console.log(error.message);
    }
  });

// Manejo de errores de Fetch para códigos de estado que no son 200
fetch('/api/data')
  .then(response => {
    // comprobar el estado de la respuesta
    if (response.ok) {
      // manejar la respuesta
    } else {
      // el servidor respondió con un código de estado fuera de 2xx
      console.log(response.status);
      return response.json();
    }
  })
  .then(data => {
    // manejar los datos del error
    console.log(data);
  })
  .catch(error => {
    // manejar el error de red o la petición fue abortada
    console.log(error.message);
  });

Axios vs Fetch: ¿Cuál es mejor para hacer peticiones HTTP?

No hay una respuesta definitiva a cuál es mejor, ya que depende de tus preferencias y necesidades. Sin embargo, aquí hay algunas pautas generales para ayudarte a decidir:

Usa Axios si quieres una manera simple y conveniente de hacer peticiones HTTP, con características como la transformación automática de datos JSON, el tiempo de espera de respuesta, los interceptores HTTP, el progreso de descarga y las peticiones simultáneas.
Usa fetch() si quieres una manera nativa y personalizable de hacer peticiones HTTP, con características como la compatibilidad con versiones anteriores, las cabeceras personalizadas, el cuerpo, el método, el modo, las credenciales, la caché, la redirección y las políticas de referencia.

Genera código Axios/Fetch con Apidog

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 hacer 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 "Diseño" 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 y pega el código Axios generado 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 hacer.

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

Conclusión

Tanto Axios como fetch() son métodos poderosos y confiables para hacer peticiones HTTP en JavaScript. Puedes elegir el que mejor se adapte a tu proyecto y estilo, o incluso usar ambos para diferentes propósitos. Lo importante es entender cómo funcionan y cómo usarlos de manera efectiva.

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. ¡Feliz codificación!

button