Consumo de APIs REST públicas con JavaScript y fetch

Clase 3 de 20 • Curso de API REST con Javascript: Fundamentos

Resumen

Aprender a consumir una API REST pública es una excelente práctica para quienes buscan dominar el desarrollo web moderno. Aquí verás cómo encontrar, elegir y consumir fácilmente una API gratuita desde GitHub, crear un pequeño proyecto de imágenes aleatorias de gatos y algunos consejos prácticos para manejar autenticación y evitar errores comunes como CORS.

¿Dónde encontrar APIs públicas gratuitas y seguras?

Para practicar el consumo de APIs, puedes buscar en GitHub el repositorio llamado Public APIs. Allí verás una colección de APIs organizadas por categorías (animales, arte, anime, blockchain y más). Estas APIs pueden ser utilizadas libremente, lo cual resulta perfecto para practicar y crear proyectos para tu portafolio.

El repositorio muestra un índice donde cada API contiene información relevante como: - CORS: Indica si la API puede ser consumida fácilmente desde el navegador. Elige APIs sin CORS al empezar para evitar problemas de acceso. - HTTPS: Ofrece mayor seguridad en la transmisión de datos. Prioriza las APIs que lo incluyan. - Método de autenticación: Algunas APIs requieren API key, otras funcionan sin autenticación y algunas usan métodos avanzados como OAuth. Para comenzar, resulta más práctico elegir APIs que no usen OAuth.

¿Qué es la TheCat API y cómo se usa?

Entre las opciones para practicar, destaca TheCat API. Es gratuita hasta 10 000 solicitudes al mes y requiere solo una API key, permitiendo cargar imágenes de gatos aleatorios. Su documentación es clara e incluye rutas, ejemplos y descripciones para empezar rápido.

En la sección de quickstart, la API ofrece una URL específica. Al hacer una petición a este endpoint, se recibe un array con un solo objeto que contiene, entre otras propiedades, la url de la imagen de un gato. Así puedes implementarla para mostrar imágenes aleatorias en tus proyectos.

¿Cómo integrar una API de imágenes en tu proyecto HTML y JavaScript?

Estructura tu proyecto:
Crea una carpeta de trabajo, un archivo index.html y un archivo de JavaScript, por ejemplo main.js.
Prepara HTML básico: incluye un título y un elemento img (con solo el atributo alt).
Conecta JavaScript:
Enlaza main.js dentro del HTML mediante una etiqueta script al final del body.
Inicializa con un console.log("Hello world!") para comprobar la conexión.
Consulta a la API:
Define la URL del endpoint de TheCat API: https://api.thecatapi.com/v1/images/search.
Usa fetch para realizar la petición; trabaja con promesas para transformar la respuesta usando res.json().
Accede a la propiedad url del primer elemento del array devuelto y asígnala como atributo src del elemento img en el DOM.

¿Cómo facilitar la lectura de respuestas JSON en el navegador?

Las respuestas de APIs REST suelen ser en formato JSON. Puedes instalar extensiones como JSON Viewer en navegadores como Google Chrome para visualizar mejor las estructuras, con tabulación, colores y encabezados que ordenan la información.

Esto es útil, especialmente si necesitas explorar APIs con respuestas más extensas o complejas.

¿Qué retos prácticos ayudan a mejorar la integración de APIs?

Como parte del aprendizaje, se recomiendan dos retos basados en el ejemplo de imágenes de gatos: - Reto 1: Agrega un botón al HTML que permita cargar una nueva imagen aleatoria al hacer clic, sin recargar la página. Para ello, enlaza el evento del botón a la función que ejecuta el fetch. - Reto 2: Implementa la lógica usando async/await en vez de la sintaxis clásica de promesas con then, para practicar diferentes formas de manejar código asíncrono.

¿Te animas a probar y a compartir tu avance? Cuéntanos tus resultados o pregunta en los comentarios si tienes dudas.

Laura Roa

student•

:D Holaa! Esta es mi solución! Gracias a todos porque gracias a sus aportes resolví el reto!!

const URL = 'https://api.thecatapi.com/v1/images/search';


async function myCat () {
    const res = await fetch(URL);
    const data = await res.json();
    const img = document.querySelector('img');
    img.src = data[0].url;
}

const myButton = document.querySelector("button");
myButton.onclick = myCat;

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Square+Peg&display=swap" rel="stylesheet">
    <title>Random Cats with API REST</title>
</head>
<body>
    <header>
        <h2>Random Cats</h2>
    </header>
    <section class="container">
        <img alt="Cat random Picture" class="image">
        <button type="button" class="random-cat-button"> Show me a cat!</button>
    </section>
    <script src="./main.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
html {
    font-size: 62.5%;
}
body {
    font-family: 'Square Peg', cursive;
}
header {
    display: flex;
    justify-content: center;
}
h1 {
    font-size: 8rem;   
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    padding: 20px;
}
.container .image {
    border-radius: 20px;
    margin: 20px;
    width: auto;
    height: 500px;
}
.random-cat-button {
    align-items: center;
    background-color: rgb(228, 164, 94);
    border: 5px solid rgb(249, 151, 66);
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Pacifico', cursive;
    font-size: 2rem;
    padding: 12px;
    width: 200px;
    height: auto;
}
.random-cat-button:hover {
    border: 5px solid rgb(228, 164, 94);
    background-color: rgb(227, 141, 67);
}

Diana Gonzalez

student•

Te quedo super hermoso!

Orangel Gonzalez

student•

Me encanta 🥰👍🏻

Carlos Alberto Meneses

student•

Listo los primeros retos! Y como soy team dogs voy a completar este curso con esa APi

Luis Tapiero

student•

https://pokemon-fetch-lt.netlify.app/

Paula Inés Cudicio

student•

Me encanta!!!!!

Carlos Rubio Gallego

student•

Rebien!

Alejandro Forero Vanegas

student•

No es mucho pero es trabajo honesto.

Julio Antonio Bencosme Campos

student•

Pura gente talentosa hay por aquí :))

Fabricio González Guasque

student•

Mi aporte al reto:

archivo .js : Le agregue que al cargar el DOM se ejecute la función, así ya nos muestra una imagen. Luego la función async, y luego obtengo en la constante reload el boton.
archivo .html : Con una flecha les indico que coloqué como id al boton "reload" que es lo que llamo en el archivo js
navegador : Hice un CSS muy básico para poner todo centrado y un poco de color al botón, quedando así en el navegador.

Juan Camilo Noreña López

student•

En vez de usar un botón para recargar la pagina use un input con estos atributos

<input type="button" value="Recargar" onclick="location.reload()">

y el js queda así

async function getURL () {
    const response = await fetch(URL);
    const data = await response.json();
    const img = document.querySelector('img');
    img.src = data[0].url;
}

getURL();

Laura Daniela Aponte Beltrán

student•

Para aquellos que se el olvidaron cositas de asincronismo, les dejo mi infografía con lo más importante de cada función asíncrona ✨

Edmir Galván Vázquez

student•

Aqui esta mi solucion al reto:D

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <title>Gatitos random</title>
</head>

<body>
    <main>
        <h1 class="title">Gatitos random</h2>
        <img class="img" alt="Foto de un gatito">
        <button class="button" id="anotherImg">Muestrame otra imagen</button>

        <script src="./main.js"></script>
    </main>
</body>

</html>

const URL = 'https://api.thecatapi.com/v1/images/search';
const button = document.getElementById('anotherImg');
const img = document.querySelector('img');

async function getCat() {
   const response = await fetch(URL);
   const data = await response.json();
   img.src = data[0].url;
}

button.onclick = getCat;

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Lato', sans-serif;
}

main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   padding: 20px 0;
}

.img {
   width: 70%;
   height: 500px;
   object-fit: cover;
   border-radius: 10px;
   box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.4);
}

.button {
   padding: 10px 15px;
   border: none;
   border-radius: 5px;
   background-color: #f8cb2e;
   font-size: 17px;
   box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.3s;
}

.button:hover {
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

Daniel Gonzalez Herrera

student•

Hasta ahorita así va el mío! 😃 .

. HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Perritos aleatorios</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h2>Perritos aleatorios</h2>
    <section class="card">
      <p class="card__title" id="title"></p>
      <img class="card__img" alt="Foto perrito aleatorio" />
      <div class="card__info">
        <p id="weight"></p>
        <p id="height"></p>
        <p id="lifeSpan"></p>
      </div>
    </section>
    <button id="button">¡Ver otro perro!</button>
    <script src="./main.js"></script>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
  background-color: #13262f;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  margin: 20px 0;
  color: #DB3A34;
  font-weight: 800;
  text-transform: uppercase;
}

.card {
  width: 550px;
  margin: 0 auto;
  background-color: #f2f2f2;
  box-shadow: 0 40px 60px -6px black;
  border-radius: 10px;
}

.card__title {
  font-size: 28px;
  background-color: #DB3A34;
  color: #fff;
  height: 60px;
  line-height: 60px;
  letter-spacing: 3px;
  border-radius: 10px 10px 0 0;
}

.card__img {
 width: 100%;
}

.card__info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 120px;
}

button {
  margin-top: 30px;
  width: 275px;
  height: 50px;
  border-radius: 20px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: #DB3A34;
  opacity: 0.6;
  color: #fff;
  transition: 0.5s;
}

button:hover {
  opacity: 1;
}

const URL = "https://api.thedogapi.com/v1/images/search";
const img = document.querySelector("img");
const title = document.getElementById("title");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const lifeSpan = document.getElementById("lifeSpan");
const button = document.getElementById("button");

// Con promesas
function getDogs() {
  fetch(URL)
    .then((res) => res.json())
    .then((data) => {
      img.src = data[0].url;
      if (data[0].breeds[0]) {
        title.innerText = data[0].breeds[0].name;
        weight.innerText = "Peso: " + data[0].breeds[0].weight.metric + " kg";
        height.innerText = "Altura: " + data[0].breeds[0].height.metric + " cm";
        lifeSpan.innerText =
          "Esperanza de vida: " + data[0].breeds[0].life_span;
      } else {
        title.innerText = "Sin información";
        weight.innerText = "Peso: Sin información";
        height.innerText = "Altura: Sin información";
        lifeSpan.innerText = "Esperanza de vida: Sin información";
      }
    });
}

// Con async/await
async function getDogs2() {
  const res = await fetch(URL);
  const data = await res.json();
  img.src = data[0].url;
  if (data[0].breeds[0]) {
    title.innerText = data[0].breeds[0].name;
    weight.innerText = "Peso: " + data[0].breeds[0].weight.metric + " kg";
    height.innerText = "Altura: " + data[0].breeds[0].height.metric + " cm";
    lifeSpan.innerText = "Esperanza de vida: " + data[0].breeds[0].life_span;
  } else {
    title.innerText = "Sin información";
    weight.innerText = "Peso: Sin información";
    height.innerText = "Altura: Sin información";
    lifeSpan.innerText = "Esperanza de vida: Sin información";
  }
}

button.onclick = getDogs2;

getDogs2();

Vsqz Gabriel

student•

proyecto creado con vite con plantilla de typescript:

https://vitejs.dev/

Juan Sebastian Espínola

student•

A mi me gustan más los patitos así que elegí una API de patitos Dejo la URL aquí por si quieren usarla (cors) . HTML

JavaScript

Leal Brigitte

student•

Reto cumplido. Creé un boton en HTML con atributo "onclick" para usarlo en JavaScript HTML

Navegador

Sebastián Andrés Sanhueza Tapia

student•

¿Cuál es tu tema de VSC?

Julian David Alzate Cuervo

student•

excelente solución

Gonzalo Caminos

student•

Deberían dar un curso sobre como trabajar con APIS y OAUTH... me lo has sacado de la punta de la lengua al tema porque justamente venía pensando que acceder a APIS publicas que no tienen validación es algo relativamente sencillo.

No obstante el mercado y los pedidos que hacen los clientes de determinadas implementaciones hay que usar OAUTH... ojala ese curso llegue pronto!

Saludos.

Juan Castro

teacher•

Pssss

https://platzi.com/clases/autenticacion-oauth/

Carlos López

student•

no es mucho pero es trabajo Honesto

Gonzalo Espindola

student•

Si a alguno le sirve, una api de dragon ball con bastantes personajes para practicar API

Luis Alejandro Vera Hernandez

student•

Gracias

Isaí Ramírez

student•

HTML

Isaí Ramírez

student•

ASYNC

Laura Roa

student•

Hola! Quiero preguntarte porque cuando usas el fetch, pones dos veces la promesa, Una fuera de la función y la otra adentro? Lo intente como lo haces y me funciona pero no entiendo la lógica! Gracias por tu aporte

Maria Camila Amaya Rubio

student•

Estiven Ruiz Arenas

student•

Así me quedo el reto

Codigo:

console.log('hola')
const URL ='https://api.thecatapi.com/v1/images/search';

const refresh = async() =>{
    const response = await fetch(URL);
    const data = await response.json();
    const img = document.getElementById('bannerImage');
    img.src = data[0].url;
}
const input = document.getElementById('buttoRefresh');
input.onclick = refresh;
refresh()

Emerson David Cabrera Salas

student•

Soy super fan de los perritos, solucioné mi reto y aroveché para practicar un poco lo que voy aprendiendo de CSS con Tailwind. Así me quedó:

Por acá el código: HTML:

Javascript

Nicolás edixon García Piñeros

student•

Consumo de APIs REST públicas con JavaScript y fetch

Conceptos fundamentales

Qué es una API REST y cómo funciona con JavaScript

Flujo de comunicación entre front-end y back-end en aplicaciones web

Primeros pasos con fetch