Las llamadas HTTP son una parte fundamental de cualquier aplicación web. Con ellas, podemos hacer que nuestra aplicación traiga datos externos de otros servidores e interactúe con la web. En este post, te enseñaremos qué son y cómo funcionan los interceptors para un cliente en React, una herramienta que nos ayudará a controlar el envío y respuesta de una llamada HTTP.
¿Qué es un cliente en React?
En nuestro post sobre configurar un cliente en Axios, te hemos explicado cómo podemos configurar una variable client para controlar las llamadas a nuestra API. Esta configuración nos facilita las llamadas HTTP, pues nos inserta la URL base de nuestra API de manera automática, ahorrándonos el paso de insertarla de manera manual en cada llamada. En ese post, hemos creado un nuevo archivo en el nivel más alto de nuestro proyecto llamado client.js. Allí, hemos configurado el cliente usando las siguientes líneas de código:
//axios react interceptor
import axios from 'axios';
const client = axios.create ({
baseURL: process.env.REACT_APP_API_BASE_URL,
});
client.interceptors.response.use (response => response.data);
export default client;Como puedes ver en las anteriores líneas de código, hemos utilizado un método llamado interceptor React para controlar lo que recibimos de la respuesta. Dentro de los paréntesis de este método, hemos definido que cada respuesta se transforme a solo sus datos. Es decir, los interceptors para un cliente en React nos permiten controlar el comportamiento de las llamadas HTTP. A continuación, te explicamos exactamente cómo lo hacen.
¿Cómo funcionan los interceptors para un cliente en React?
Antes hemos visto que los interceptors para un cliente en React pueden ayudarnos a filtrar los datos que recibimos de una respuesta a una llamada HTTP. Para explicarte exactamente cómo lo hacen, te mostraremos qué es lo que recibimos normalmente en una respuesta HTTP. Para ello, te sugerimos abrir tu inspector para escribir las siguientes líneas de código.
¿Quieres saber qué recibimos cuando no tenemos interceptors para un cliente en React? Pues pintémoslo en pantalla con un console.log:
//react js interceptor
import axios from 'axios';
const client = axios.create ({
baseURL: process.env.REACT_APP_API_BASE_URL,
});
client.interceptors.response.use (response => {
console.log (response);
return response.data;
export default client;Si tienes tu inspector abierto, verás que, una vez hagamos nuestra petición anterior, no obtendremos los datos del servidor de manera directa. En cambio, lo que hace Axios es devolvernos un objeto con las propiedades config, data, headers, request, status y statusText. De todas estas propiedades que obtenemos, la que nos interesa es data, pues es ahí donde se encuentran los datos que queremos insertar en nuestro proyecto.
Entonces, los interceptors para un cliente en React son una especie de filtro que nos permite controlar los datos que recibimos o enviamos. Si no tuviéramos un interceptor axios react en nuestro cliente, el componente que haga la llamada HTTP recibirá todas las propiedades del objeto de respuesta. Esto haría que el componente tuviera que definir de dónde coger sus datos. Aunque esto es un proceso sencillo, tener que hacerlo en cada petición de cada componente que haga una llamada HTTP es poco eficiente. Por ello, te recomendamos utilizar los interceptors para un cliente en React.
Es muy importante que declares tu cliente y tus interceptors en el nivel más alto de tu proyecto. Esto nos asegurará que la respuesta sea tratada primero por nuestro filtro y, luego, por el componente.
Ten presente que puedes realizar todo tipo de funciones con los interceptors. Aunque nosotros hemos decidido controlar los datos que recibimos de la respuesta, puedes realizar otro tipo de acciones.
Para conocer otras funciones que puedes declarar con esta herramienta, te recomendamos leer el post HTTP Interceptors in React. Allí encontrarás un tutorial para añadir un token JWT a cada una de tus peticiones para autenticar el cliente. Además, encontrarás un ejemplo de cómo usar esta herramienta para controlar los errores de una respuesta utilizando palabras clave como if y else.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué son y cómo funcionan los interceptors para un cliente en React, ¡es la hora de usarlos para controlar las llamadas en tus propios proyectos! Si quieres seguir aprendiendo sobre el desarrollo de proyectos de programación para la web, no solo en React sino también en lenguajes como JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva con el que te convertirás en un experto de estas herramientas en pocos meses. ¿Te animas a seguir aprendiendo? ¡Inscríbete ya!
