Consumir servicios en React con Axios – ejemplo práctico (Json-server)

En este post vamos a aprender cómo consumir servicios en React con axios de una API externa. También vamos a realizar un ejemplo práctico paso a paso. Mediante este ejemplo accederemos a una api para poder realizar un CRUD (Create, Read, Update, Delete) de Películas con React. Además en este caso usaremos el componente axios que nos proporciona React.

Al final del post te dejo las indicaciones necesarias para instalar Router-Dom y Bootstrap, que son opcionales dependiendo del diseño deseado. Yo he usado navegación entre componentes y clases de bootstrap para tener un diseño más claro aunque sencillo.

Axios

Axios es un cliente HTTP ligero que se basa en promesas. Es un componente de React que permite interactuar con una API REST. Por eso lo instalamos en nuestro proyecto de react:

A partir de aquí vamos a empezar a consumir servicios en React con axios

Componente Peliculas

Antes de crear las clases para las distintas peticiones creamos la clase Global, en la que tendré las urls de mis APIs (en este caso solo accederemos a una) y que importaré en todas las clases que la necesiten.

Este componente Peliculas va a contener una tabla con todas las películas disponibles.

La forma de crear este componente será similar en los siguientes, variando en pequeños detalles debido a las distintas peticiones. Por eso se explicará a fondo este y los demás solo se comentarán aportando contenido visual.

Este componente necesita importar axios, ya que va a realizar una petición a un servicio, en este caso GET para recibir películas.

Además importamos nuestra clase Global en la que tenemos la ruta de la API.

Hay que saber la url exacta a la que queremos acceder dependiendo de la petición. La clase Global se crea para guardar la url base de todas las rutas. Es decir, Global guarda solo la url de la api, y luego las rutas específicas son las diferentes peticiones. Por ejemplo, con JsonServer podemos ver las posibles peticiones (ejemplo genérico):

GET      /posts
GET      /posts/1
POST     /posts
PUT      /posts/1
DELETE   /posts/1

Peliculas

En la clase Peliculas vamos a inicializar dos variables de estado para que se actualice la vista dependiendo de su valor. Tendremos un array vacío ‘peliculas’ para guardar las películas y otra ‘status’ a ‘false’ para el estado.

Creamos la función componentDidMount (métodos de ciclos de vida) en la que llamaremos al método cargarPeliculas, que va a recibir todas las películas de la API. Además usaremos la url que tenemos en Global y le añadiremos la ruta específica que queremos, en este caso ‘/peliculas‘.

Usamos el método ‘.get‘ de axios al que le enviamos como parámetro el string de la url completa (Global + petición). En la promesa que hace axios con ‘.then‘ (una vez que haya conectado correctamente) obtiene una respuesta ‘res‘.

Ahora modificamos nuestras variables de estado para guardar los datos obtenidos: guardamos en ‘peliculas’ los datos de la respuesta con ‘res.data‘ y ‘status’ lo ponemos a ‘true’ para usarlo como condición a la hora de pintar nuestros datos en la vista:

Solo falta el ‘render‘, que será la parte visual del componente Peliculas. En él dibujamos un título y una tabla. En el cuerpo de la tabla, como queremos que sea dinámico dependiendo de las películas que obtenga en la petición, vamos a usar la variable de estado ‘status’ como condición para mostrar los datos. Una vez que esta variable es ‘true’ (cuando se modifica al hacer la petición correctamente con axios) recorremos el array ‘peliculas’ con ‘.map‘ y por cada línea de la tabla mostramos los datos de cada película.

Como se muestra en la siguiente imagen, en la tabla se muestran los diferentes datos obtenidos del servidor ‘json-server’.

Componente InsertarPeliculas

Para crear este componente necesitamos importar también axios y Global, y para insertar una película nueva debemos tener sus datos. En mi caso los obtengo mediante un formulario.

Creamos un método nuevaPelicula en el que guardaremos los datos obtenidos de la nueva película en variables para asignarlas a las propiedades de un objeto json ‘pelicula’. También guardamos la url completa para nuestra petición. Y por último hacemos la petición con axios, que en este caso usa el método ‘.post‘, al que le envía como parámetros la url y el objeto nuevo a insertar (‘pelicula’). Después de la promesa de axios cambiamos ‘status’ a true para usarlo como condición en la vista.

Por último, en el render mostraré un formulario para recoger los datos de la nueva película. Cuando se envíe, llamará a mi método nuevaPelicula para que inserte los datos. Tras el éxito de la petición se redirecciona al componente Peliculas para visualizar la tabla con los cambios (la nueva película estará añadida).

Componente UpdatePelicula

Este componente sería muy similar al de InsertarPelicula, ya que modificar una película requiere el mismo procedimiento que insertar, que es enviar un objeto. Solo que en este caso el método que usa axios es ‘.put‘.

Realizamos los imports necesarios y recogemos los datos nuevos a insertar. Y en el método modificarPelicula hacemos la petición con axios, enviando por parámetros la url exacta (Global + petición) y el objeto ‘pelicula’ nuevo.

Y en el render volvemos a mostrar un formulario

Te muestro la modificación de la película insertada anteriormente (8, Nueva Película, Un director, Aventuras)

Componente DetallesPelicula

Este componente sería muy similar al de ‘Peliculas’, ya que requiere un método GET. Solo que esta vez añadiremos un parámetro a la ruta que será, en este caso, el id de la película que la cual queremos obtener los detalles.

El proceso sería el mismo, y en el método mostrarPelicula axios usará ‘.get‘ otra vez. Pero ahora, en la ruta que introducimos por parámetro añadimos un id: ‘/peliculas/1’, ‘/peliculas/3’… Ese id lo recibo por props.

Vemos los detalles de nuestra película modificada anteriormente.

Componente DeletePelicula

Por último, el componente para eliminar películas. También será similar a ‘DetallesPelicula’, incluso con la misma url de la petición. Esta vez el método de axios será ‘.delete‘.

En el render mostraremos un simple título preguntando por la confirmación y al pinchar en el botón se ejecuará el método ‘eliminarPelicula‘

Eliminamos la película 8, la que insertamos y modificamos anteriormente.

¡¡Y ya hemos aprendido a consumir servicios en React con axios!! Ya tendríamos los componente para poder realizar un CRUD accediendo a los métodos de un servicio API Rest!!

Aquí te añado también el enlace a un vídeo que te explica de una manera muy sencilla cómo crear una API en local con JsonServer. Esto serviría para hacer pruebas de peticiones a servicios, ya que es difícil encontrar una API pública en la que poder insertar, modificar o eliminar datos.

A continuación te muestro los comandos para instalar Router-Dom y Bootstrap:

Recuerda siempre importar todos los componentes necesarios en tu proyecto de React. También recuerda que el servidor de React a veces se puede colapsar, dejar de funcionar correctamente… Así que no dudes en pararlo y reiniciarlo cuando te surjan errores que no consigas identificar.

Espero haberte ayudado y haber resuelto tus dudas con este post 🙂

Autora: Nazaret de la Calle Miján
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Código de GitHub: CRUD Películas
LinkedIn: Mi Perfil