La forma más simple y poderosa de consumir una API en la web hoy es fetch. Con asincronismo y promesas, JavaScript se comunica con servidores en cualquier lugar para obtener productos, datos de usuario, autenticarse y guardar información. Entiende su anatomía, maneja errores sin sorpresas y practica con una fake API para dominar solicitudes HTTP reales.
¿Qué es fetch y cómo funciona en JavaScript?
Fetch es la API moderna de JavaScript para hacer solicitudes HTTP. Recibe una URL (endpoint) y retorna una promesa. Permite trabajar con datos remotos en cualquier sitio: servidores en Estados Unidos, Brasil, México o Colombia. Con esto, una web puede obtener información, autenticar y persistir datos.
response.json() convierte el body a objeto JSON.catch captura y registra fallos.const para valores que no cambian y nombres en mayúsculas para constantes.¿Cómo luce un fetch de GET con promesas?
Ejecuta un GET pasando solo la URL. Evita cortar la cadena con punto y coma entre then.
// src/19-HTTP.js const FAKE_API = 'URL_DE_LA_FAKE_API'; fetch(FAKE_API) .then(response => response.json()) .then(data => { console.log(data); // Previsualiza la información obtenida. }) .catch(error => { console.error(error); // Manejo de errores. });
; antes del siguiente then.about:blank y la consola del navegador.¿Qué métodos HTTP, headers y status codes debes dominar?
Además de GET, puedes crear, actualizar y eliminar recursos usando otros métodos HTTP. La sintaxis de fetch acepta un segundo argumento para configurar la solicitud.
¿Cómo enviar método, headers y body?
Define método, cabeceras y cuerpo según pida la documentación de la API (por ejemplo, la Platzi fake store). GET se sobreentiende cuando pasas solo la URL.
fetch(FAKE_API, { method: 'POST', // También: 'PUT', 'DELETE', 'GET' (implícito si no lo defines). headers: { 'Content-Type': 'application/json' // Aquí puedes incluir autenticación u otros metadatos si el servidor lo requiere. }, body: JSON.stringify({ // Estructura mínima que la API necesita para crear un recurso. // Respétala según su documentación. }) }) .then(res => res.json()) .then(data => { console.log(data); // Recurso creado/actualizado/eliminado según el método. }) .catch(err => console.error(err));
JSON.stringify para cumplir el formato esperado.¿Cómo interpretar los status de la respuesta?
El response incluye un status que describe el resultado del request.
Puedes inspeccionar el response en el navegador y validar si el producto de prueba se agregó haciendo un GET al endpoint y revisando los últimos elementos.
¿Cómo practicar para dominar el asincronismo con fetch?
Trabaja en tu editor creando un archivo como src/19-HTTP.js, declara la URL de la fake API en una constante y prueba solicitudes GET, POST, PUT y DELETE. Usa la consola para observar el ciclo de la promesa, parsea con response.json() y registra resultados con console.log.
then y finaliza con catch para errores.about:blank + DevTools para ver estados y status.status y el contenido devuelto.Si quieres, comparte en los comentarios cómo estructuraste tu fetch para crear y listar productos, y qué status estás observando en tus pruebas.
La forma más simple y poderosa de consumir una API en la web hoy es fetch. Con asincronismo y promesas, JavaScript se comunica con servidores en cualquier lugar para obtener productos, datos de usuario, autenticarse y guardar información. Entiende su anatomía, maneja errores sin sorpresas y practica con una fake API para dominar solicitudes HTTP reales.
Fetch es la API moderna de JavaScript para hacer solicitudes HTTP. Recibe una URL (endpoint) y retorna una promesa. Permite trabajar con datos remotos en cualquier sitio: servidores en Estados Unidos, Brasil, México o Colombia. Con esto, una web puede obtener información, autenticar y persistir datos.
response.json() convierte el body a objeto JSON.catch captura y registra fallos.const para valores que no cambian y nombres en mayúsculas para constantes.Ejecuta un GET pasando solo la URL. Evita cortar la cadena con punto y coma entre then.
// src/19-HTTP.js
const FAKE_API = 'URL_DE_LA_FAKE_API';
fetch(FAKE_API)
.then(response => response.json())
.then(data => {
console.log(data); // Previsualiza la información obtenida.
})
.catch(error => {
console.error(error); // Manejo de errores.
});
; antes del siguiente then.about:blank y la consola del navegador.Además de GET, puedes crear, actualizar y eliminar recursos usando otros métodos HTTP. La sintaxis de fetch acepta un segundo argumento para configurar la solicitud.
Define método, cabeceras y cuerpo según pida la documentación de la API (por ejemplo, la Platzi fake store). GET se sobreentiende cuando pasas solo la URL.
fetch(FAKE_API, {
method: 'POST', // También: 'PUT', 'DELETE', 'GET' (implícito si no lo defines).
headers: {
'Content-Type': 'application/json'
// Aquí puedes incluir autenticación u otros metadatos si el servidor lo requiere.
},
body: JSON.stringify({
// Estructura mínima que la API necesita para crear un recurso.
// Respétala según su documentación.
})
})
.then(res => res.json())
.then(data => {
console.log(data); // Recurso creado/actualizado/eliminado según el método.
})
.catch(err => console.error(err));
JSON.stringify para cumplir el formato esperado.El response incluye un status que describe el resultado del request.
Puedes inspeccionar el response en el navegador y validar si el producto de prueba se agregó haciendo un GET al endpoint y revisando los últimos elementos.
Trabaja en tu editor creando un archivo como src/19-HTTP.js, declara la URL de la fake API en una constante y prueba solicitudes GET, POST, PUT y DELETE. Usa la consola para observar el ciclo de la promesa, parsea con response.json() y registra resultados con console.log.
then y finaliza con catch para errores.about:blank + DevTools para ver estados y status.status y el contenido devuelto.Si quieres, comparte en los comentarios cómo estructuraste tu fetch para crear y listar productos, y qué status estás observando en tus pruebas.
URL de la página de platzi de FAKEAPI:
URL:
const FAKEAPI = 'https://api.escuelajs.co/api/v1/products';
Código del POST:
const FAKEAPI = 'https://api.escuelajs.co/api/v1/products';
fetch(FAKEAPI, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
body: JSON.stringify({
title: 'Producto de prueba',
price: 999,
description: 'Creado desde fetch',
categoryId: 1,
images: ['https://placeimg.com/640/480/any'],
}),
});
Deberías revisar los códigos de estado HTTP en absolutamente todas las peticiones que realices, justo después de recibir la respuesta y antes de procesar los datos. Una peculiaridad de fetch es que no considera un error HTTP (como un 404 o un 500) como un fallo de la promesa. Para fetch, si el servidor respondió, la petición fue "exitosa", incluso si la respuesta fue "No encontré lo que buscabas".
Por esto, la mejor práctica es evaluar la propiedad response.ok (que es true para códigos de estado entre 200 y 299). Si es , puedes lanzar un error manualmente con . Imagina que intentas comprar un boleto de cine; el cajero (el servidor) te atiende (la promesa se resuelve), pero te dice que la sala está llena (código 400). Si no verificas el estado de esa respuesta, tu código intentará imprimir un boleto vacío, causando un colapso en tu aplicación.
falsethrow new Error()Mi solución:
// Reto 30 - Fetch en JavaScript: peticiones HTTP reales
// Descripción
// En este reto dominarás la API fetch de JavaScript para realizar peticiones HTTP reales. Aprenderás a consumir APIs, manejar diferentes métodos HTTP (GET, POST, PUT, DELETE), trabajar con headers, parsear respuestas JSON y manejar errores de forma efectiva.
// Conceptos clave
// Fetch API: La forma moderna de hacer peticiones HTTP en JavaScript
// Promesas: fetch retorna una promesa que se resuelve con la respuesta
// Métodos HTTP: GET (obtener), POST (crear), PUT (actualizar), DELETE (eliminar)
// Headers: Metadatos de la petición como Content-Type
// Body: Datos enviados en peticiones POST/PUT, generalmente JSON.stringify()
// Status codes: Códigos que indican el resultado (200=éxito, 404=no encontrado, 500=error)
// Manejo de errores: Usar .catch() para capturar fallos de red o del servidor
function obtenerProductos() {
// Ejercicio 1:
// Realiza una petición GET a la API de productos.
const FAKEAPI = 'https://api.escuelajs.co/api/v1/products'
return fetch(FAKEAPI)
// .then((response) => response.json())
// .then((data) => console.log(data))
// .catch((error) => console.error('Error:', error))
}
function obtenerProductosParseados() {
// Ejercicio 2:
// Realiza una petición GET y convierte la respuesta a JSON.
const FAKEAPI = 'https://api.escuelajs.co/api/v1/products'
return fetch(FAKEAPI)
.then((response) => response.json());
}
function crearProducto(title, price, description) {
// Ejercicio 3:
// Realiza una petición POST para crear un producto.
// Envía title, price y description en el body como JSON.
const FAKEAPI = 'https://api.escuelajs.co/api/v1/products'
return fetch(FAKEAPI, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title,
price,
description,
}),
});
}
function actualizarProducto(id, title, price) {
// Ejercicio 4:
// Realiza una petición PUT para actualizar un producto.
// Utiliza el id recibido y envía title y price.
const FAKEAPI = `https://api.escuelajs.co/api/v1/products/${id}`
return fetch(FAKEAPI, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title,
price,
}),
});
}
function eliminarProducto(id) {
// Ejercicio 5:
// Realiza una petición DELETE para eliminar el producto indicado por id.
const FAKEAPI = `https://api.escuelajs.co/api/v1/products/${id}`
return fetch(FAKEAPI, {
method: 'DELETE',
});
}
function obtenerProductosConError() {
// Ejercicio 6:
// Realiza una petición GET y maneja los errores utilizando .catch().
// En caso de error, retorna un objeto con información sobre el error.
const FAKEAPI = 'https://api.escuelajs.co/api/v1/products'
return fetch(FAKEAPI)
.catch((error) => {
return {
error: true,
message: 'Error al obtener productos'
}
})
}
function verificarStatusResponse() {
// Ejercicio 7:
// Realiza una petición GET y verifica el código de estado de la respuesta.
// Si el status no es 200, lanza un Error.
const FAKEAPI = 'https://api.escuelajs.co/api/v1/products'
return fetch(FAKEAPI)
.then((response) => {
if (response.status !== 200) {
throw new Error('Status no es 200')
}
return response;
});
}
export {
obtenerProductos,
obtenerProductosParseados,
crearProducto,
actualizarProducto,
eliminarProducto,
obtenerProductosConError,
verificarStatusResponse,
};
Todos los test pasaron en verde 💚:
function obtenerProductos() {
// Ejercicio 1:
// Realiza una petición GET a la API de productos.
}
function obtenerProductosParseados() {
// Ejercicio 2:
// Realiza una petición GET y convierte la respuesta a JSON.
}
function crearProducto(title, price, description) {
// Ejercicio 3:
// Realiza una petición POST para crear un producto.
// Envía title, price y description en el body como JSON.
}
function actualizarProducto(id, title, price) {
// Ejercicio 4:
// Realiza una petición PUT para actualizar un producto.
// Utiliza el id recibido y envía title y price.
}
function eliminarProducto(id) {
// Ejercicio 5:
// Realiza una petición DELETE para eliminar el producto indicado por id.
}
function obtenerProductosConError() {
// Ejercicio 6:
// Realiza una petición GET y maneja los errores utilizando .catch().
// En caso de error, retorna un objeto con información sobre el error.
}
function verificarStatusResponse() {
// Ejercicio 7:
// Realiza una petición GET y verifica el código de estado de la respuesta.
// Si el status no es 200, lanza un Error.
}
export {
obtenerProductos,
obtenerProductosParseados,
crearProducto,
actualizarProducto,
eliminarProducto,
obtenerProductosConError,
verificarStatusResponse,
};
Actualmente esta dando 500. 🥲
