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.
- Endpoint: URL del recurso al que llamas.
- Promesa: estado pendiente, resuelta o rechazada.
- Parseo:
response.json() convierte el body a objeto JSON.
- Errores:
catch captura y registra fallos.
- Buenas prácticas: usar
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.
});
- Ojo con el encadenado: no cierres con
; antes del siguiente then.
- Puedes probar el código en una pestaña
about:blank y la consola del navegador.
- Verás la promesa como pendiente y luego resuelta con los datos (en el ejemplo se observaron 51 productos).
¿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));
- Headers: metadata como tipo de contenido o autenticación.
- Body: datos enviados; usa
JSON.stringify para cumplir el formato esperado.
- Documentación: cada API define requisitos mínimos y estructura del recurso.
¿Cómo interpretar los status de la respuesta?
El response incluye un status que describe el resultado del request.
- 200: éxito.
- 201: creado (se agregó correctamente un recurso).
- 3xx: redirecciones.
- 400: error del cliente (permisos o datos faltantes).
- 401: no autenticado.
- 404: recurso no encontrado.
- 500: error interno del servidor.
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.
- Asincronismo: espera resultados sin bloquear la UI.
- Promesas: encadena
then y finaliza con catch para errores.
- Depuración en navegador:
about:blank + DevTools para ver estados y status.
- Estructura de fetch: URL + opciones (método, headers, body).
- Validación: compara el
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.
