Saltar al contenido

¿Axios vs. Fetch?

Axios es una librería Javascript utilizada para hacer peticiones http desde node.js o XMLHttpRequests desde el navegador, y soporta el API de Promise que es nativo de JS ES6.

Algunas características esenciales del Axios, según la documentación, son:

¿Axios vs. Fetch?
¿Axios vs. Fetch?
  • Puede utilizarse para interceptar solicitudes y respuestas de http.
  • Transforma automáticamente los datos de solicitud y respuesta.
  • Permite la protección del lado del cliente contra el XSRF.
  • Tiene incorporado soporte para el progreso de la descarga.
  • Tiene la capacidad de cancelar solicitudes.

Axios no viene como una API JavaScript nativa, así que tendremos que importarlo manualmente en nuestro proyecto. Para empezar, tendremos que incluir los siguientes comandos:

  • Usando cdn1<scriptsrc=»https://unpkg.com/axios/dist/axios.min.js»></script>html
  • Usando npm1npm instalar axiosnodo
  • Usando bower1bower instalar axiosbash

Y hacer una petición como la siguiente:

123456789axios.get($0027ejemplos/ejemplo.json$0027).then((response)= >{/// handle successconsole.log(response);}).catch((error)= >{/// handle errorconsole.log(error);})

javascript

Axios también proporciona más funciones para hacer otras peticiones de red también, coincidiendo con los verbos HTTP que desea ejecutar, como por ejemplo:

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.options(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

Puede consultar la configuración de la solicitud completa en la documentación oficial.

La respuesta a una solicitud contiene la siguiente información:

  • datos de respuesta: La respuesta proporcionada por el servidor
  • Estado de respuesta: El código de estado HTTP de la respuesta del servidor
  • respuesta.statusTexto: Mensaje de estado HTTP de la respuesta del servidor
  • Cabezales de respuesta: Los encabezados con los que el servidor respondió
  • response.config: La configuración que se proporcionó a los axios para la solicitud
  • solicitud.de.respuesta: La solicitud que generó esta respuesta

Ahora estamos familiarizados con las definiciones y el uso de axios y fetch(). Vamos a centrar nuestra atención en cómo realizar algunas operaciones del mundo real con Axios y Fetch.