Versión portuguesa

Axios y Fetch son herramientas populares para realizar solicitudes HTTP en JavaScript, pero tienen algunas diferencias clave. Aquí hay un resumen:

axios

• Funciones integradas: Axios viene con muchas funciones integradas, como transformación JSON automática, interceptores de solicitudes y respuestas y cancelación de solicitudes.
• Compatibilidad del navegador: Admite navegadores más antiguos, incluido Internet Explorer.
• Manejo de errores: Axios rechaza automáticamente las promesas para estados de error HTTP (como 404 o 500), lo que facilita el manejo de errores.
• Interceptores de solicitudes/respuestas: Permite modificar solicitudes o respuestas de forma global de forma sencilla.
• Cancelación de solicitudes: Axios ofrece una forma sencilla de cancelar solicitudes.

Buscar

• API nativa: Fetch es una API web nativa, lo que significa que no es necesario instalar bibliotecas adicionales.
• Basado en promesas: utiliza promesas, pero debe verificar manualmente el estado de la respuesta en busca de errores.
• Manejo de transmisión: Fetch admite transmisión, lo que puede ser útil para manejar respuestas grandes.
• Más control: proporciona más control sobre las solicitudes, pero requiere más código adicional para funciones como establecer patrones o interceptar solicitudes.
• No hay soporte integrado para JSON: debe llamar a .json() en el objeto de respuesta para analizar los datos JSON.

Casos de uso

• Utilice Axios si necesita un amplio conjunto de funciones listas para usar, especialmente para aplicaciones complejas.
• Utiliza Fetch para casos de uso más simples o cuando quieras evitar dependencias externas.

Ejemplo de uso

Axios:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

Buscar:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Notas:

• Para enviar datos, fetch() usa la propiedad body para una solicitud POST, mientras que Axios usa la propiedad data.
• Los datos en fetch() se transforman en una cadena usando el método JSON.stringify.
• Axios transforma automáticamente los datos devueltos por el servidor, pero con fetch(), debes llamar al método Response.json() para analizar los datos en un objeto JavaScript.
• Con Axios, se puede acceder a la respuesta de datos proporcionada por el servidor dentro del objeto de datos, mientras que en el método fetch(), los datos finales se pueden nombrar con cualquier variable.

Conclusión

Ambos tienen sus puntos fuertes y la elección a menudo depende de sus necesidades y preferencias específicas. Si está creando una aplicación más grande con muchas interacciones API, Axios puede facilitar algunas tareas, mientras que Fetch es ideal para tareas sencillas.

Axios ofrece una API fácil de usar que simplifica la mayoría de las tareas de comunicación HTTP. Sin embargo, si prefiere utilizar funciones nativas del navegador, definitivamente puede implementar una funcionalidad similar usted mismo con Fetch API.

Como hemos explorado, es completamente factible replicar las funciones principales de Axios utilizando el método fetch() disponible en los navegadores. La decisión de incluir una biblioteca HTTP de cliente depende en última instancia de su comodidad con las API nativas y los requisitos específicos de su proyecto.

Para más información: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59