Conceptos fundamentales
¿Qué es una API REST?
Flujo de comunicación entre usuarios, frontend y backend
Primeros pasos con fetch
Consume tu primera API REST
Endpoints y query parameters
¿Qué son los HTTP Status Codes?
¿Qué es una API KEY?
Proyecto
Maquetación del proyecto
¿Qué son los Métodos HTTP?
GET: leyendo michis favoritos
POST: guardando michis favoritos
Consultas a la API para escribir HTML dinámico
DELETE: borrando michis favoritos
Headers en peticiones HTTP
¿Qué son los Headers HTTP?
Header de autorización
Header de Content-Type
FormData: publicando imágenes de michis
Bonus
Axios: librerías de JavaScript para consumir APIs
CORS, caché, redirect y tu propio clon de fetch
GraphQL, Web Sockets y Web 3.0: el mundo más allá de REST
Próximos pasos
Toma el Curso Práctico de Consumo de API REST con JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 32
Preguntas 8
Como comentario al margen.
He escuchado a muchos TechGurus y Devs reconocidos hablar de cómo les toca evaluar entrevistas técnicas y como los aspirantes no saben hacer una petición a una API sin Axios. Instalan una dependencia para un fetch sencillo y cuando los cuestionan sobre la función nativa fetch no la saben.
Algo ha tener en cuenta.
Debo admitir la evolución del profesor a lo largo de todos los cursos que el presenta, ha mejorado bastante 😃
Para Agosto 2022 la sintaxis de declaración de axios es:
const api = axios.create({
baseURL: 'https://api.thecatapi.com/v1',
headers: {'X-API-KEY': 'YOUR-KEY'}
});
El mismo proyecto anterior pero con la biblioteca axios:
.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="Description" content="Extended Description">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Consumo de APIs</title>
<!-- Utilizando el CDN de la biblioteca Axios -->
<script defer src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script defer src="./app.js"></script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 48px;
}
img {
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.random-img {
width: 400px;
height: auto;
}
button {
margin: 16px 0;
}
.random-cats-sec,
.favorites-cats-sec {
padding: 25px 25px;
border: solid 1px black;
border-radius: 25px;
}
.error-app {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>Gatos App</h1>
<span class="error-app" id="error"></span>
<section class="random-cats-sec" id="random-cats">
<h2>Gatos Aleatorios</h2>
</section>
<button id="reload">Recargar</button>
<section class="favorites-cats-sec" id="favorites-cats">
<h2>Gatos Favoritos</h2>
</section>
</div>
</body>
</html>
.
JS
// El mismo proyecto de API Rest pero usando Axios
const API_KEY = 'tuapikey'-tuapikey-tuapikey;
// Creando una instancia de axios para reutilizarla
const api = axios.create({
baseURL: 'https://api.thecatapi.com/v1/',
headers: { 'X-API-KEY': API_KEY },
});
const URL_RANDOM_RES = '/images/search?limit=2';
const URL_FAVORITES_RES = '/favourites';
const randomCats = document.querySelector('#random-cats');
const favoritesCats = document.querySelector('#favorites-cats');
const buttonReload = document.querySelector('#reload');
const errorNode = document.querySelector('#error');
// Función para adicionar imagen a una sección
function addImageNode({nodeSection, imageId, imageUrl, attId, buttonText}) {
const article = document.createElement('article');
const img = document.createElement('img');
const button = document.createElement('button');
img.className = 'random-img';
img.setAttribute(attId, imageId);
img.src = imageUrl;
const btnText = document.createTextNode(buttonText);
button.appendChild(btnText);
article.appendChild(img);
article.appendChild(button);
nodeSection.appendChild(article);
}
// Cargando imágenes aleatorias
async function loadRandomCats() {
try {
const { data, status } = await api.get(URL_RANDOM_RES);
if (status !== 200) throw new Error(`Error de petición HTTP en Random: ${status}`);
data.forEach(el => {
addImageNode({
nodeSection: randomCats,
imageId: el.id,
imageUrl: el.url,
attId: 'data-imageid',
buttonText: 'Guardar Favorito',
});
});
} catch (error) {
errorNode.innerText = `Error: ${error.message}`;
}
};
// Cargando imágenes de favoritos
async function loadFavoritesCats() {
try {
const { data, status } = await api.get(URL_FAVORITES_RES);
if (status !== 200) throw new Error(`Error de petición HTTP en Favoritos: ${status}`);
data.forEach(el => {
addImageNode({
nodeSection: favoritesCats,
imageId: el.id, // no es id de la imagen sino id de favorito
imageUrl: el.image.url,
attId: 'data-id',
buttonText: 'Eliminar Favorito',
});
});
} catch (error) {
errorNode.innerText = `Error: ${error.message}`;
}
};
// Salvando imagenes a favoritos
async function saveFavoritesCat(id) {
try {
// Llamamos al objeto axios con método que necesitamos, en este caso POST
// response = { data, status }
const { data, status } = await api.post(URL_FAVORITES_RES, {
// Pasamos los parámetros o querystring
image_id: id,
});
if (status !== 200) throw new Error(`Error de petición POST HTTP en Favoritos: ${status}`);
return data.id;
} catch (error) {
errorNode.innerText = `Error: ${error.message}`;
}
};
// Eliminando imágenes de favoritos
async function deleteFavoritesCat(id) {
try {
const { status } = await api.delete(`${URL_FAVORITES_RES}/${id}`);
if (status !== 200) throw new Error(`Error de petición DELETE HTTP en Favoritos: ${status}`);
} catch (error) {
errorNode.innerText = `Error: ${error.message}`;
}
}
// Evento recargar imagenes random
buttonReload.addEventListener('click', () => {
while (randomCats.lastChild.nodeName === 'ARTICLE') {
randomCats.lastChild.remove();
}
loadRandomCats();
});
// Evento guardar imagen en favorito
randomCats.addEventListener('click', (e) => {
const target = e.target;
if (target && target.nodeName === 'BUTTON') {
const img = target.previousSibling;
const imageId = img.dataset.imageid;
saveFavoritesCat(imageId).then((id) => {
alert('Hemos guardado la imagen a favoritos!');
addImageNode({
nodeSection: favoritesCats,
imageId: id, // no es id de la imagen sino id de favorito
imageUrl: img.src,
attId: 'data-id',
buttonText: 'Eliminar Favorito',
});
});
}
});
// Evento eliminar imágenes de favorito
favoritesCats.addEventListener('click', (e) => {
const target = e.target;
if (target && target.nodeName === 'BUTTON') {
const img = target.previousSibling;
const id = img.dataset.id;
deleteFavoritesCat(id);
alert('Hemos eliminado la imagen a favoritos!');
const parent = target.parentNode;
if (parent.nodeName === 'ARTICLE') parent.remove();
}
});
loadRandomCats();
loadFavoritesCats();
Task failed successfully!
que facil esta usar la libreria de axios
cada clase te hace dar cuenta de lo mucho que falta por aprender
Julio 2022, esta es la nueva forma de introducir por defecto nuestra API-KEY:
const api = axios.create({
baseURL: 'https://api.thecatapi.com/v1',
headers: {'X-API-KEY': 'YOUR_API_KEY_HERE'}
});
Algo interesante es que la respuesta de Axios no tiene la propiedad “ok” como si la tiene fetch. Es una lástima, porque es muy útil para hacer comprobaciones
En esta captura la primera petición está hecha con fetch y la segunda con axios.
Código:
;(async function testFunc() {
const res = await fetch(
"https://api.thecatapi.com/v1/images/search?limit=3&mime_types=jpg")
const res2 = await API.get( "https://api.thecatapi.com/v1/images/search?limit=3&mime_types=jpg")
log(res, res2)
})()
Lo bueno que todo el curso se uso fetch, pero se uso siempre async/await…veo los comentarios y sus preguntas técnicas preguntaron por la sintaxis de promesas.😅 Con fe.
Por otra parte, nunca había visto axios hasta esta clase, una maravilla, ya veo porque lo el prof lo valora mucho.
Ahora un poema “Hubo un error: SUCCES”
Lo que aprendi con este profe no tiene nombre!!! Solo me queda darle las gracias por siempre.
Nota:
El 1 de febrero de 2022, el equipo central de Node.js fusionó una solicitud de extracción y agregó la API Fetch a Node.
Script para Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
No sabía que se podía crear una instancia de axios y poner valores por default, lo había estado usando mal, excelente clase, me gusta que no te saltes los errores de consola, es más, si lo haces adrede se me hace una excelente aportación.
"Axios es amor"
xd
Buenísimo el contenido y la explicación del profesor hasta el momento.
Mis apuntes en Notion del curso: https://deeply-warlock-d5d.notion.site/12-API-REST-con-Javascript-Fundamentos-6e439bd7662b443582054b7c18b9c263
La herramienta nativa de node.js es https
const https = require('https');
const options = {
hostname: 'example.com',
port: 443,
path: '/todos',
method: 'GET',
};
const req = https.request(options, res => {
console.log(`statusCode: ${res.statusCode}`);
res.on('data', d => {
process.stdout.write(d);
});
});
req.on('error', error => {
console.error(error);
});
req.end();
En mi caso me apareció el error: " Uncaught ReferenceError: axios is not defined ".
Entiendo que es un error en la instalación de la libreriía pero al llamar a axios en la consola sí me aparecía.
En resumen, se soluciona colocando el script de axios (como dice el profe) antes del script del main.js. Yo lo había colocado después, al final del HTML.
mi primer resulado de Axios fue esta clase 😂 y el video siguió donde me habia quedado, con Juan diciendo “ese seguramente esta mas que perfecto” 😆
Al pasar de fetch a Axios me quedo así, solo falta manejar los errores:
html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>API Gatos</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
<h1>Api Gatos</h1>
<span id="error"></span>
<section id="GatosRandom">
<h2>Gatos aleatorios</h2>
<article>
<img alt="foto gato aleatorio" id="img-gato1">
<button class="BotonFav">Guardar Gato en favoritos</button>
</article>
<article>
<img alt="foto gato aleatorio" id="img-gato2">
<button class="BotonFav">Guardar Gato en favoritos</button>
</article>
<button id="recargar">Recargar</button>
</section>
<section id="uploadGato">
<h2>Sube la foto de tu gato</h2>
<form id="uploadingForm">
<input id="file" type="file" name="file">
<button type="button" id="uploadButton">Subir gato</button>
</form>
</section>
<section id="GatosFavoritos">
<h2>Gatos favoritos</h2>
</section>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src='main.js'></script>
</body>
</html>
Js
const API_KEY = 'tu-api-key'
const spanError = document.getElementById('error')
const saveButtons = document.getElementsByClassName('BotonFav')
const api = axios.create({
baseURL: 'https://api.thecatapi.com/v1',
})
api.defaults.headers.common['x-api-key'] = API_KEY;
const HTTPCodes = {
200: 'OK',
201: 'CREATED',
400: 'BAD REQUEST',
401: 'UNAUTHORIZED',
403: 'FORBIDDEN',
404: 'NOT FOUND',
500: 'INTERNAL SERVER ERROR',
503: 'SERVICE UNAVAILABLE',
504: 'GATEWAY TIMEOUT',
}
const loadRandomCats = async () => {
const { data, status } = await api.get('/images/search', {
params: {
limit: 2,
page: 2
}
})
if (status === 200) {
const img1 = document.getElementById('img-gato1')
const img2 = document.getElementById('img-gato2')
img1.src = data[0].url
img2.src = data[1].url
img1.className = ""
img2.className = ""
img1.classList.add(data[0].id)
img2.classList.add(data[1].id)
} else {
spanError.innerHTML = "hubo error al cargar la API"
}
}
const loadFavoritesCats = async () => {
document.getElementById('GatosFavoritos').innerHTML = ""
const { data, status } = await api.get('/favourites')
if (status === 200) {
const FavoritesCats = document.getElementById('GatosFavoritos')
data.forEach((element) => {
let article = document.createElement('article')
let image = document.createElement('img')
image.alt = "foto gato favorito"
image.className = element.id
image.src = element.image.url
let button = document.createElement('button')
button.innerText = "Eliminar Gato de favoritos"
button.className = "EliminarFav"
article.appendChild(image)
article.appendChild(button)
FavoritesCats.appendChild(article)
})
const removeButtons = document.getElementsByClassName('EliminarFav')
for (let i = 0; i < removeButtons.length; i++) {
removeButtons[i].addEventListener('click', removeFavoritesCats)
}
} else {
spanError.innerHTML = HTTPCodes[res.status]
}
}
const saveFavoritesCats = async (e) => {
let article = e.target.parentNode
let id = article.firstElementChild.className
const { data, status } = await api.post('/favourites', {
image_id: id
})
loadFavoritesCats()
loadRandomCats()
}
const removeFavoritesCats = async (e) => {
const article = e.target.parentNode
let id = article.firstElementChild.className
const { data, status } = await api.delete(`/favourites/${id}`)
loadFavoritesCats()
}
const uploadGatoPhoto = async () => {
const form = document.getElementById('uploadingForm')
const formData = new FormData(form)//recibe form como atributo por lo que recibe todos los valores de los input
//console.log(formData.get('file'))
const { data, status } = await api.post('/images/upload', formData)
if (status === 201) {
let id = data.id
let { data2, status2 } = await api.post('/favourites', {
image_id: id
})
loadFavoritesCats()
} else {
spanError.innerHTML = HTTPCodes[res.status]
}
}
document.getElementById('recargar').addEventListener('click', loadRandomCats)
document.addEventListener('DOMContentLoaded', loadRandomCats)
document.addEventListener('DOMContentLoaded', loadFavoritesCats)
document.getElementById('uploadButton').addEventListener('click', uploadGatoPhoto)
for (let i = 0; i < saveButtons.length; i++) {
saveButtons[i].addEventListener('click', saveFavoritesCats)
}
Css
img {
background-size: cover;
width: 150px;
height: 150px;
}
Minuto 1:29
Juan menciono a la Argentina 😱😱
18/12/2022
Elijo creer 🙏🙏🙏
La verdad que sí ahorra bastante código. Voy a probar axios por mi cuenta.
Axios me parecio impresionante, como puede solucionar el tema del fetch de una manera increible mas facil de entender y mas legible,
Axios god, para nosotros los flojos sera el cielo xD
aXsios
Conocer Axios es lo mejor que me ha pasado en este curso! :´)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?