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:
- Sintaxis más expresiva: Aunque es una diferencia mínima, es más simple, minimalista y fácil de entender y seguir.
- 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.