Traer datos de una API es una acción que ejecutaremos muy a menudo a la hora de desarrollar para la web. Esta acción nos permite hacer que la fuente de nuestra base de datos sea una URL externa y no un archivo propio dentro del proyecto. Esto, además, nos permite actualizar la API automáticamente con las entradas de varios usuarios. En este post, te enseñaremos cómo traer datos de una API con Fetch para que lo apliques a tus propios proyectos.
¿Qué es Fetch?
Como puedes leer en nuestro post sobre peticiones HTTP con Fetch, este es un método que nos proporciona directamente el navegador para realizar peticiones HTTP de todo tipo. Es decir, Fetch es uno de los métodos que encontramos como parte del Browser Object Model. Este método, además, es muy similar en su funcionamiento a Axios. Para conocer exactamente en qué se diferencian, te invitamos a leer nuestro post sobre elegir Fetch o Axios.
¿Cómo traer datos de una API con Fetch?
Para traer datos de una API con Fetch, lo primero que necesitamos es la URL de la API a la que queremos acceder. Para hacer esta prueba, puedes elegir entre las muchas API gratuitas que existen en la web. Nosotros te recomendamos balldontlie.io, que tiene muchas bases de datos disponibles para el público.
Recuerda que una base de datos en una API básica es un array con distintos objetos. Cada uno de estos objetos tiene diversas propiedades y valores a las que podremos acceder una vez importemos la API.
Ahora que sabemos a qué API queremos acceder, deberemos crear una función con la que vamos a traer datos de una API con Fetch. En nuestro caso, hemos decidido llamar a esta función getData. Dentro de esta función, vamos a declarar una constante, en la que guardaremos la URL de nuestra API. Esto hará que acceder sea mucho más fácil que insertar la URL cada vez.
getData ( ) {
const url = ‘https://urldeapi’
},
Una vez declarada esta función, utilizaremos el método fetch para acceder a los datos de esta constante url. Recuerda que este método recibe como parámetro la URL de nuestra API. Además, es importante notar que el método fetch nos devuelve una promesa. Esto quiere decir que podemos controlar los datos a los que llamemos con métodos como then y catch. A continuación, te mostramos cómo incluimos este método en la función que tenemos:
getData ( ) {
const url = ‘https://urldeapi’
fetch (url);
},
Con las líneas de código anteriores, hemos hecho la petición a nuestra API. Sin embargo, todavía no hemos determinado el manejo de esta petición. Para ello, deberemos agregar un método then para los casos en los que la promesa se resuelve y un método catch para los casos en que la promesa se rechaza.
A continuación, puedes ver cómo hemos añadido el método then para traer datos de una API con Fetch. Este método recibe una respuesta HTTP que podemos identificar con responseHttp. Una vez obtenida esta respuesta, podemos definir qué hacer con ella. En nuestro caso hemos decidido convertirla a formato JSON:
getData ( ) {
const url = ‘https://urldeapi’
fetch (url)
.then (responseHttp) => responseHttp.json ( ));
},
Ahora, para traer datos de una API con Fetch deberemos controlar también los datos que nos llegan. Para ello, podemos encadenar otro método then que actúe frente a la respuesta obtenida del método json anterior. Este siguiente método recibirá como parámetro los datos de la API, que podemos llamar como queramos.
Ahora, te mostramos cómo hemos encadenado este segundo método para transformar los datos obtenidos y pintarlos por pantalla usando un console.log:
fetch (url)
.then (responseHttp) => responseHttp.json ( ));
.then ((data => console.log (data);
});
},
},
Una vez hecho este proceso, podrás ver en la consola de tu navegador los distintos objetos que estaban en la API a la que hemos accedido. Estos objetos, además, tendrán una posición en el array definida por su número index, al igual que las distintas propiedades y valores de las que hemos hablado antes.
En este post has aprendido cómo traer datos de una API con Fetch paso a paso, acercándote cada vez más a ser un experto del desarrollo web. Ahora, el siguiente paso para cumplir este sueño es aprender sobre otros aspectos de este mundo, como JavaScript, HTML, CSS, React y webPack. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva ideal para ti. ¿A qué esperas para inscribirte? ¡Pide información y descubre cómo cambiar tu vida!
