Axios es una librería que nos permite hacer llamadas HTTP desde nuestro código de una manera mucho más sencilla. De este modo, nos facilita el proceso de traer datos a nuestro proyecto desde otros sitios, por ejemplo de una API. En este post, te enseñaremos cómo configurar un cliente en Axios para simplificar las llamadas HTTP que hagas en tu proyecto.
Antes de empezar
Antes de configurar un cliente en Axios, primero crearemos un lugar dentro de nuestro proyecto en el que manejaremos todos los datos que provengan de nuestra API. Si has seguido nuestros posts sobre crear una aplicación con create-react-app, código de una aplicación creada con create-react-app y limpiar create-react-app, sabes que hay una carpeta llamada scr dentro de cualquier aplicación creada de este modo. Entonces, dentro de esta carpeta crearemos una subcarpeta llamada api, donde insertaremos un fichero de JavaScript.
En nuestro nuevo archivo cliente.js vamos a configurar un cliente en Axios. Lo primero que haremos será importar la librería Axios con la siguiente línea de código:
import axios from ‘axios’;
¿Cómo configurar un cliente en Axios?
Aunque existen muchas herramientas que nos permiten hacer llamadas HTTP en nuestros proyectos, como la librería Request. Una de las ventajas de Axios es que nos permite crear un cliente configurado con un endpoint para que todas las peticiones que hagamos con ese cliente llamen a ese endpoint. Es decir, no tendremos que definir la URL a la que queremos llamar en cada petición.
Entonces, para configurar un cliente en Axios debemos declarar una variable client e igualarla a axios.create. El método axios.create es una afirmación que nos permite crear una nueva instancia de Axios con una configuración personalizada. Por ello, dentro del método deberemos pasar un objeto de configuración. Dentro de este objeto podemos, entre otras cosas, definir la URL base con la que se harán las llamadas de este cliente. En nuestro caso, insertaremos como base la URL de nuestra API. A continuación, puedes ver estas líneas de código:
const client = axios.create ({
baseURL: process.env.REACT_APP_API_BASE_URL,
})
Con las anteriores líneas de código hemos podido configurar un cliente en Axios, lo que nos dará muchas ventajas frente a otras herramientas, como Fetch. Otra de las cosas que nos permite hacer Axios es manipular o definir unos interceptores tanto para las peticiones como para las respuestas. Es decir, podemos controlar la ida (petición) y la devuelta (respuesta de la petición).
Entonces, accediendo a la propiedad interceptors.response del cliente podemos hacer que cada respuesta que recibamos se transforme en los datos de la respuesta. Esto lo hacemos porque la parte de la respuesta que nos interesa son los datos. Cuando hacemos una petición y todo va bien, lo que queremos que llegue a nuestro componente es un dato, no si el estatus es okay o si el código es uno o el otro.
A continuación, te mostramos cómo se escribe esta configuración:
client.interceptors.response.use (response => response.data);
Con la línea de código anterior hemos definido que, siempre que haya una petición (client) y haya una respuesta (response), Axios debe coger esa respuesta y darnos solamente la data. Una vez que hemos podido configurar un cliente en Axios, debemos exportarlo con la siguiente línea de código:
export default client;
Como has podido aprender en nuestros posts sobre cómo funcionan los CommonJS Modules en JavaScript y cómo funcionan los ES6 Modules en JavaScript, exportar una sección de código en JavaScript nos permite acceder a ella desde otros archivos de nuestro proyecto. Esto hace que podamos dividir nuestro proyecto en trozos más fáciles de leer y manipular, cada uno en su propio archivo.
Después de configurar un cliente en Axios, podemos crear una función get a una determinada URL del servidor que hemos definido. Para conocer cómo hacer esto, te invitamos a leer nuestro post sobre crear una función get con un cliente Axios.
¿Qué sigue?
Ahora que sabes cómo configurar un cliente en Axios, ¡es el momento de usar Axios para traer todo tipo de contenido a tus proyectos! Para aprender más sobre la creación de proyectos de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, en donde aprenderás a desarrollar con lenguajes como JavaScript, JSX, CSS y HTML. Así, en tan solo unos pocos meses, te convertirás en un experto del desarrollo web. ¿A qué esperas para unirte? ¡Te esperamos para acompañarte en tu proceso de convertirte en un profesional!
