Cursos Empresas Blog Live Conf Eventos Precios

Fetch en JavaScript: peticiones HTTP reales

Curso de Fundamentos de JavaScript

Contenido del curso

No sé dónde empezar

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

DOM y Experiencia en el Navegador

Modulos y Asincronía

Tomar examen

Fetch en JavaScript: peticiones HTTP reales

Resumen

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.

Miguel Lozano

Estudiante

Hace 13 días

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 💚:

Fetch en JavaScript: peticiones HTTP reales

Fundamentos Javascript

Tus primeras líneas de JavaScript en el navegador

Editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

var vs let vs const en JavaScript

Tipos de datos en JavaScript explicados

Operadores aritméticos y especiales en JavaScript

Template literals en JavaScript: sintaxis y uso práctico

Métodos esenciales de strings en JavaScript

Coerción de tipos en JavaScript explicada

Igualdad débil vs estricta en JavaScript

Operadores lógicos AND, OR y NOT en JS

Cómo usar if, else y else if en JavaScript

Cómo funciona switch en JavaScript

for, for of y for in en JavaScript

while y do-while en JavaScript sin loops infinitos

Funciones, Scope y Estructuras de Datos

Funciones y arrow functions en JavaScript

Scope en JavaScript: global, función y bloque

Closures en JavaScript: estado privado en cuentas

Cómo usar arrays en JavaScript con CRUD

Objetos en JavaScript: claves, acceso y optional chaining

Desestructuración y spread operator en objetos

map y filter con arreglos de objetos

find y reduce en arrays JavaScript

Primeras funciones CRUD del sistema de notas

Cómo leer código en un proyecto real

DOM y Experiencia en el Navegador

Seleccionar elementos del DOM con JavaScript

Opiniones dinámicas en el DOM con JS

Eventos del DOM: clic, mouse y teclado

Formularios en JavaScript con localStorage

LocalStorage con JSON.stringify y JSON.parse

Manipulación del DOM con IA en tu editor

Modulos y Asincronía

export e import en ES Modules

Callbacks y promesas en JavaScript asíncrono

Async/await como azúcar sintáctica en JavaScript

Fetch en JavaScript: peticiones HTTP reales

Landing de productos con Fake API en JavaScript

Criterio profesional al usar IA en código

Debugging y Markdown en tu app de notas

Qué hacer al terminar un curso de JavaScript

Resumen