Interceptors para un cliente en React

Autor: | Última modificación: 7 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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:

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 interceptors 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:

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 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!