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.jsconstFAKE_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.
