Axios es una librería muy popular que nos facilita las llamadas HTTP en cualquier proyecto de programación. Es decir, facilita el proceso de insertar contenido externo a nuestros proyectos. Por ello, aprender a usar esta librería es fundamental para cualquier aplicación que interactúe con datos externos. En este post, te enseñaremos cómo crear una función get con un cliente Axios para llamar a una URL determinada a lo largo de tu proyecto.
Crear una función get con un cliente Axios
En nuestro post sobre configurar un cliente en Axios, te hemos enseñado cómo declarar una variable client que se iguale a nuestra API para que no tengamos que definir la URL cada vez que hagamos una llamada con ese cliente. Para ello, hemos creado un archivo client.js dentro de nuestra carpeta src y hemos escrito las siguientes líneas de código:
const client = axios.create ({
baseURL: process.env.REACT_APP_API_BASE_URL,
})
client.interceptors.response.use (response => response.data);
export default client;
Ahora que tenemos esto configurado, podemos crear una función get con un cliente Axios. Esto nos permitirá acceder a una determinada URL dentro del servidor localhost: que hemos definido en las líneas de código anteriores. Entonces, supongamos que tenemos el siguiente componente:
const TweetsPage = ( ) => (
<div className = ‘tweetsPage’>
<ul>
{tweets.map (tweet => {
<li key = {tweet.id}> {tweet.content}</li>
))}
</ul>
</div>
);
El componente anterior se encarga de tomar el array tweets y transformar cada uno de sus objetos en un elemento de lista. Para aprender cómo hemos creado este componente, te invitamos a leer nuestro post sobre transformar un array de objetos en enlaces.
Ahora, queremos hacer una petición al API desde nuestro componente TweetsPage para que se encargue de traer los tweets de nuestra API, transformarlos y pintarlos. Para ello, podríamos utilizar directamente el cliente Axios que hemos creado. Sin embargo, crear una función get con un cliente Axios es una mejor práctica. Esto nos permite dividir nuestro código para tener secciones más legibles y fáciles de manipular.
¿Cómo crear una función get con un cliente Axios?
Antes de crear una función get con un cliente Axios, crearemos un nuevo archivo en el que insertaremos esta función. A la estrategia de crear distintos archivos para secciones de código específicas le llamamos módulos. Los módulos en programación son como los capítulos de un libro, pues nos permiten dividir nuestros proyectos en secciones más legibles. Para acceder a estas secciones desde otros archivos basta con exportar e importar sus variables.
Para aprender cómo utilizar los módulos en JavaScript, te sugerimos leer nuestros posts sobre cómo funcionan los CommonJS Modules en JavaScript, cómo funcionan los ES6 Modules en JavaScript y cómo cargar un módulo en JavaScript. Recuerda que puedes utilizar esta estrategia en React, pues es una librería hija de este lenguaje.
El siguiente paso es crear un archivo llamado service.js dentro de nuestra carpeta de componentes. Utilizaremos este archivo para insertar todas las funciones que nos ayudarán a llamar a la API. Lo primero que haremos en este archivo será importar el cliente Axios que hemos creado en nuestro archivo client.js:
import client from “../../api/client”
Observa que con la línea de código anterior no sabemos si nuestro cliente es Axios, simplemente importamos la variable cliente. Esto es lo bueno de crear nuestro archivo client.js con todo su código, pues podemos localizar la dependencia de la librería Axios en un solo punto.
A continuación, crearemos la función get, con la que accederemos al contenido de nuestra API. Ya que nuestra aplicación de ejemplo es una simulación de Twitter, llamaremos a esta función getLatestTweets. Esta función se encargará de montar una URL y retornar el client.get a dicha URL.
export const getLatestTweets = ( ) => {
const url = ;
return client.get (url)
)
En la función anterior insertarás la URL de tu API con el acceso al objeto del que quieras tomar los datos. En nuestro caso, hemos insertado un localhost que nos dirige a un array de tweets. Como nuestro cliente nos dirige a esta URL, podemos simplificar la función insertando las barras oblicuas que nos dirijan a nuestro objeto específico.
export const getLatestTweets = ( ) => {
return client.get (‘/api/tweets’);
)
Así, hemos podido crear una función get con un cliente Axios. En este caso, nuestro cliente inserta la URL localhost:800 antes de las barras oblicuas. Si quisieras concatenar este código para hacerlo aún más simple, podrías crear una constante que se encargue de la sección api y otra para la sección api/tweets. A continuación, te mostramos nuestro archivo final con variables concatenadas:
import client from ‘../../api/client’;
const tweetsBaseUrl = ‘/api’;
export const getLatestTweets = ( ) => {
const url = ‘${tweetsBaseUrl}/tweets’;
return client.get (url);
);
¿Quieres seguir aprendiendo?
Ahora que sabes cómo crear una función get con un cliente en Axios para traer todo tipo de contenido externo a tus proyectos, seguro que quieres seguir aprendiendo sobre las posibilidades que te trae el mundo de la programación web. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás todo lo necesario para ser un experto en desarrollo web en pocos meses. ¿Te animas a seguir aprendiendo con nosotros? ¡Matricúlate ya!
