Introducción a Axios: Reemplazo de fetch

Vamos a conocer la librería que te mencioné hace dos o tres clases: Axios, que funciona como un reemplazo de fetch.

Como te comentaba, puedes buscar comparativas como "Axios versus Fetch" para obtener más información. Sin embargo, en mi opinión, Axios tiene dos ventajas claras:

  1. Sintaxis más expresiva: Aunque es una diferencia mínima, es más simple, minimalista y fácil de entender y seguir.
  2. Mejor soporte: Aunque fetch está soportado por la mayoría de los navegadores, es importante verificarlo. Puedes buscar "fetch soporte" en Google y verás una tabla, usualmente de Mozilla, que muestra claramente en qué versiones está disponible. En general, el soporte es bastante amplio, salvo en versiones muy antiguas, así que no debería ser un problema.

Instalación de Axios en un proyecto Vue

Vamos a instalar Axios, ya que podemos hacerlo perfectamente en nuestro proyecto.

Para eso, usamos el siguiente comando:

npm install axios

Esto es algo habitual cuando trabajamos con el ecosistema de Node. Recuerda que estamos usando Vue, y que npm es el manejador de paquetes de Node.

Cuando instalamos Node, obtenemos dos herramientas:

node: el motor de JavaScript.

npm: Node Package Manager, el manejador de paquetes.

También puedes usar npm i axios, que es la versión abreviada. Con esto, Axios quedará instalado en tu proyecto Vue. Te recomiendo hacerlo con el servidor apagado por si acaso, aunque normalmente no debería dar problemas si está levantado.

Una ventaja de usar Node y npm en lugar de una CDN es que no necesitamos descargar el archivo JS, copiarlo manualmente al proyecto, configurarlo ni enlazarlo en varias partes. Es mucho más limpio y profesional.

Configuración global de Axios

Una vez instalado, hay que configurarlo globalmente para poder usarlo en toda la aplicación. Esta configuración la haremos en el archivo de arranque de Vue, es decir, en main.js.

En ese archivo, como ya vimos, se crea la instancia de Vue y se define el componente padre (App.vue), donde se cargan todos los demás componentes.

Importación del paquete

Primero importamos Axios. Me gusta colocar las importaciones de paquetes de terceros separadas, así que lo haremos así:

import axios from 'axios';

Nota que esta es una importación por defecto, por eso no usamos llaves {}.

Creación de la instancia de Vue

Luego, dividimos la operación de creación y montaje de la aplicación en dos pasos:

const app = createApp(App);
app.mount('#app');

Esto nos permite hacer configuraciones adicionales antes de montar la app.

En algunos casos, el editor puede lanzar una advertencia si importamos algo que aún no usamos. Si es tu caso, puedes comentar la línea temporalmente para hacer pruebas.

Asignación global de Axios

Ahora configuramos Axios como una propiedad global. Esto se hace así:

app.config.globalProperties.$axios = axios;

El prefijo $ es opcional, pero en Vue se usa por convención para indicar que es una propiedad especial o interna del framework. Esto ayuda a evitar conflictos con otras variables, por ejemplo, si más adelante defines algo llamado axios dentro de un componente.

De todas formas, si no te gusta el $, puedes omitirlo, aunque lo recomendado es seguir la convención.

Verificación de la configuración

Para asegurarnos de que todo funciona, podemos hacer una prueba en la consola del navegador. Primero, recuerda que ahora Axios está disponible en toda la aplicación a través de this.$axios dentro de los componentes.

Si quieres acceder a Axios desde la consola global, puedes asignarlo al objeto window así:

window.axios = axios;

Con esto, podrás acceder a él directamente en la consola del navegador:

console.log(window.axios);

Si no lo asignas al objeto window, el navegador no lo reconocerá y mostrará undefined.

Acepto recibir anuncios de interes sobre este Blog.

Vamos a instalar y configurar axios para reemplazar las peticiones mediante fetch que implementamos antes.

| 👤 Andrés Cruz

🇺🇸 In english