Cómo consumir un API Rest con la librería de Javascript Axios


Axios es una popular librería Open Source para Javascript que nos permite realizar operaciones como cliente HTTP, basado en el modelo de promesas.

Axios destaca por su sencillez y ligereza, lo cual lo hace indicado para proyectos incluso en procesadores de baja potencia como el ESP8266 o el ESP32.

Asimismo, proporciona una capa unificada para la realización de peticiones Ajax, independiente de otros framework que usemos en el proyecto. Es compatible con la mayoría de navegadores actuales. Es Open Source y su código está disponible en https://github.com/axios/axios.

Cómo instalar Axios

El proceso de instalación es muy sencillo. Podemos usar un gestor de paquete como NPM, Bower o Yarn. Por ejemplo, en NPM sería

Anuncio:

O podemos añadirlo directamente desde un CDN de la siguiente forma:

Ejemplo básico de Axios

Vamos a ver los aspectos básicos de uso con un sencillo ejemplo. Primero, vamos a ver cómo se realizaría una petición POST a la URL http://tudireccion.com. Las funciones 'OkCallback' y 'ErrorCallback' serian las funciones de nuestro código para gestionar el resultado de la petición.

Sin Axios

Usando Axios, este mismo ejemplo quedaría de la siguiente forma.

Con Axios

Consumir un API Rest con Axios

Vamos a ver cómo usar Axios para acceder a un API Rest de forma sencilla. Emplearemos nuestro API Rest de ejemplo en Node y Express, que configuramos en esta entrada.

Vamos a crear una sencilla página muy con unos simples botones para mostrar el uso de Axios.

Para ello creamos un fichero llamado 'index.html' con el siguiente contenido.

Por otro lado, creamos un fichero llamado 'main.js', con el siguiente contenido, que usa Axios para definir funciones que llaman a cada una de las acciones del API Rest de ejemplo.

Ahora, si pulsamos en cada uno de los botones, podemos comprobar en la consola del navegador que las acciones son llamadas correctamente.

Por otro lado, en la consola de NodeJs comprobamos que, efectivamente, las acciones están siendo invocadas.


Tenéis todo el código del ejemplo en GitHub

Hasta aquí este sencillo ejemplo sobre cómo consumir un API Rest gracias a Axios, una librería muy interesante que deberíais incorporar a vuestra librería herramientas. 

Anuncio:

Previous Impresión 3D: Introducción a los programas CAD
Next Puerta de garaje Maker 1/4. Rediseño 3D de un engranaje
1000