Axios

Conecta el Front y el Back con Axios

Bruno Gabryell Cabral da Silva

28 de jul. de 2023 • 9 min read

Las solicitudes HTTP son extremadamente esenciales para el desarrollo web. A través de ellos, interconectamos el frontend y el backend, bloques primordiales en proyectos fullstack que muchas veces se ven como partes aisladas.

Al ver la importancia de esta conexión entre los dos, juntos en este artículo implementaremos un proyecto que usa React.js en el frontend y Node.js (que a su vez se conecta a una base de datos MySQL) en el backend, devolviendo al front información y procesamiento realizado en la parte posterior a través de Axios, uno de los frameworks de JavaScript más famosos que funciona de manera eficiente al realizar conexiones HTTP.

¿Qué es React.js?

React es una librería JavaScript código abierto enfocado en crear interfaces de usuario de una manera mucho más práctica que usar JavaScript puro. Fue ganando más espacio porque era fácil de asimilar, entender y adaptar.

¿Que es Node.js?

Node es un intérprete del lenguaje JavaScript, creado a partir de otro llamado V8. A lo largo de los años, se ha vuelto cada vez más utilizado porque admite JavaScript tanto en el lado del cliente como en el del servidor, además de ser fácil de entender.

¿Por qué Axios?

Si buscas, notarás que hay varias bibliotecas enfocadas en solicitudes HTTP como Axios. Por lo tanto, es posible que en algún momento te preguntes por qué usarlo en lugar de cualquier otro existente y te respondp: además de poder usarlo tanto en el servidor como en el cliente, Axios tiene una gran interacción con los datos JSON (muy usado en este tipo de implementaciones), sin mencionar que se necesitan muy pocas líneas de código para ejecutar lo que queremos.

Además, sus funciones tienen nombres fáciles de entender: si quieres usar un método POST, simplemente usa la función axios.post, o axios.delete para el método DELETE, y así sucesivamente. Probablemente debido a beneficios como estos, Axios es uno de los más populares, si no el más grande, entre ellos.

Primeros pasos

En primer lugar, vamos a crear el directorio para el proyecto. Como buena práctica de programación, es interesante crear dos directorios más dentro de este principal, uno para el frontend y otro para el backend. Pero tomémoslo con calma, queridos, empezaremos por la parte de atrás primero.

Configurando el Backend

En el directorio backend, creemos el archivo package.json, instalemos MySQL2 (utilizado para la conexión entre Node.js y MySQL), Express (para organizar solicitudes y respuestas) y Nodemon (para evitar la necesidad de reiniciar el servidor cada vez que realizar cualquier cambio en los archivos del proyecto). Para hacerlo, simplemente ejecuta los siguientes comandos en una terminal iniciada en la carpeta back del proyecto:

npm init -y

npm install mysql2

npm install express

npm install nodemon

También se debe crear el archivo principal de Node.js. Haremos esto dentro de una carpeta src y lo llamaremos server.js. También insertaremos un script de desarrollo en el archivo package.json que usará nodemon para ejecutar el server.js que creamos:

Si todo va bien, al ejecutar el comando npm run dev en una terminal ejecutada dentro del directorio back, obtendrá el siguiente resultado:

En este proyecto utilizaremos una base de datos proporcionada por el propio MySQL, llamada sakila. Puedes descargar el archivo sql aquí, extraerlo e importarlo a tu MySQL. En esta base de datos, usaremos la tabla actor y crearemos una carpeta llamada functions donde se realizarán todas las solicitudes a la base de datos, buscando una mejor organización de nuestro código.

Ahora vamos a generar la conexión a la base de datos. Crearemos un directorio llamado connection en la parte de atrás y usaremos la función createPool de MySQL2 para definir la información de MySQL que estamos usando:

Figura 4 - Configurando la conexión con la base de datos.

A continuación, generaremos la ruta actors que poseerá cuatro métodos: leer (get), crear (post), eliminar (delete) y actualizar la base de datos (put). Dentro del directorio routes que debe hacerse en back, crearemos el archivo actors.js con los debidos métodos de interacción con la base:

Figura 5 - Ruta **actors** con los métodos **get**, **put**, **post** y **delete** y sus respectivas funciones.

Figura 6 - Implementando la ruta **actors** en el archivo principal.

Figura 7 - Función **getAllActors** del método **get**.

Figura 8 - Función **registerActor** del método **post**.

Figura 9 - Función **updateActor** del método **put**.

Figura 10 - Función **deleteActor** del método delete.

💡

Nota: Recuerda que todas estas implementaciones del ítem Configuración del Backend deben hacerse dentro del directorio back que creamos.

¡Listo! Con todo configurado aquí en el backend, es hora de pasar al front.

Configurando el Frontend

Lo primero que vamos a hacer aquí en el front es crear un proyecto React. Si todo va bien, al terminar de ejecutar estos comandos, se abrirá en el navegador una página con el símbolo de React en movimiento:

npx create-react-app front

cd front

npm install

npm install axios

npm start

Una vez que se crea la base de nuestra interfaz y se instalan las herramientas cruciales, crearemos un componente Actors que se llamará en App. Es allí donde crearemos las cuatro solicitudes que usamos en nuestro back. La intención es crear un componente que tendrá cuatro botones, uno para cada método (GET, POST, PUT e DELETE). Al hacer clic en el botón, se llama al componente correspondiente al verbo.

Figura 11 - Importación del componente **Actors** y función **returnMethod**.

Figura 12 - Retorno del Componente **Actors**.

Ahora que hemos creado las estructuras necesarias para el back y el front, es hora de finalmente usar Axios para cada uno de los métodos CRUD.

Requisiciones con Axios

Método GET

Implementemos el componente GetAllActors, responsable de usar Axios para realizar una solicitud GET a nuestro backend.

La primera acción a realizar es importar el Axios. Este a su vez tiene funciones correspondientes para cada método que utilizaremos (GET, POST, PUT y DELETE) y, en el caso de GET, recibe como parámetro un único argumento, que es el endpoint.

La función axios.get devuelve un objeto con diversa información, de la cual usaremos los datos clave, que tiene la respuesta enviada por Node.js. Dado que esperamos recibir una lista de actores, podemos usar el map para crear un elemento div para cada elemento.

Probablemente, si has estado siguiendo este paso a paso al pie de la letra, apareció un error en lugar de devolver una lista de elementos cuando presionaste el botón que implementa el componente GetAllActors, éste para ser exactos:

El error era de esperarse, no te preocupes. Es muy importante aprender sobre CORS para que podamos adecuar conscientemente quién queremos que haga solicitudes HTTP en nuestro proyecto y cómo.

CORS (Cross-origin Resource Sharing) es un mecanismo utilizado por los navegadores para compartir recursos entre diferentes orígenes. Funciona como una medida de protección de la API para que no todas las URL puedan acceder a nuestra aplicación. A través de CORS, es posible bloquear y elegir qué servidores pueden consumir la API, así como qué métodos se pueden utilizar. En el directorio back, realiza la siguiente acción en tu terminal:

npm install CORS

Ahora, lo importaremos e implementaremos en nuestro archivo server.js, declarando en el archivo principal que nuestro servidor lo usará:

Figura 15 - Implementación del CORS en **server.js**.

Como hicimos en la línea 8, estamos diciendo que cualquier servidor y cualquier método puede acceder a nuestra aplicación. Si desea restringir a un determinado método o servidor, simplemente inserte un objeto como parámetro de la función CORS, las claves origin y method con la información necesaria, como en el ejemplo a continuación:

Figura 16 - Utilizando CORS para insertar restricciones.

Como no tenemos restricciones, usaremos el método CORS sin parámetros. Ahora, después de este pequeño cambio, nuestra aplicación debería funcionar:

Figura 17 - Componente **GetAllActors** em execução.

Método POST

Diferente de la función get, post recibe más de un parámetro y no es tan extraño eso, ¿verdad? Debido a sus variantes con GET, en POST reenviamos en el cuerpo de la solicitud los parámetros que recibirá el otro lado. El segundo parámetro es solo un objeto con esta información.

Dicho esto, necesitamos dos inputs para que el usuario llene la información de first_name y last_name. Estos valores deben ser guardados en estados que enviaremos como requisición al hacer clic en un botón de Registrar. Veamos:

Figura 18 - Implementación y función **register** del componente **RegisterActor**.

Figura 19 - Retorno del componente **RegisterActor**.

💡

Nota: Ten en cuenta que, además de usar Axios para realizar una solicitud HTTP, la función register también verifica si hay información válida para los campos first_name y last_name, evitando así el registro de un actor con un nombre o apellido vacíos.

Figura 20 - Componente **RegisterActor** en ejecución.

Método PUT

Al igual que con el método post, put también recibe dos parámetros, siendo el segundo un objeto con los datos que enviará el cuerpo de la solicitud a nuestro backend. Luego construiremos un componente similar a RegisterActor, con la diferencia de que enviaremos tres parámetros en lugar de dos, ya que necesitamos la identificación del usuario para ubicar el elemento que se cambiará. De esta forma, crearemos tres inputs y tres estados, también enviados por un botón que llamaremos Modificar Actor.

Figura 21 - Implementación del componente **UpdateActor** y función **updateActor**.

Figura 22 - Retorno del componente **UpdateActor**.

Figura 23 - Componente **UpdateActor** en ejecución.

Método DELETE

Finalmente, tenemos el método delete. Diferente de los otros, con delete necesitamos reenviar la id del usuario que va a ser borrado vía endpoint, pues es así como la función deleteActor del backend recibe este dato. Además de eso, crearemos un input de tipo number para que sea llenado el id y un estado para almacenarlo. Por medio del botón Apagar, enviaremos este dato al backend.

Figura 24 - Implementación del componente **DeleteActor** y función **deleteItem**.

Figura 25 - Retorno del componente **DeleteActor**.

Figura 26 - Componente **DeleteActor** en ejecución.

Consideraciones finales

Llegamos al final de este viaje creando un proyecto que conecta el frontend con el backend a través del framework Axios. Deja aquí en los comentarios lo que piensas de esta forma de conectar los dos lados de una aplicación y si conoces y usas alguna otra forma.

¡Todo el éxito!

💡

Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.