Peticiones HTTP con Fetch en JavaScript

Contenido del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

17
APIs REST con JavaScript dominadas
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:40

Peticiones HTTP con Fetch en JavaScript

Curso de API REST con Javascript

Clase 10 de 17

Clase 10 / 17

Recursos

La función Fetch es la herramienta nativa de los navegadores modernos para hacer peticiones HTTP a APIs REST desde JavaScript. Si quieres aprender a consumir una API, manipular respuestas y manejar errores con código limpio, aquí tienes lo esencial para dominar Fetch desde la consola del navegador.

¿Qué es Fetch y cómo hace una petición HTTP?

Fetch es una función global del navegador que recibe como primer parámetro el origen o URL al que quieres hacer la solicitud. Al ejecutarla, retorna una promesa, lo que significa que necesitas manejar su resolución antes de acceder a los datos [01:00].

La forma clásica es encadenar un then para capturar la respuesta cuando la promesa se resuelva:

javascript fetch("https://api.escuelajs.co/api/v1/products") .then(r => r.json()) .then(jsonResponse => console.log(jsonResponse));

Lo primero que retorna Fetch no es la información de la API, sino un objeto response con metadatos muy útiles: el estatus HTTP, los headers y un campo ok que indica si la petición fue exitosa.

¿Qué retorna fetch en JavaScript? Retorna una promesa que resuelve un objeto Response con metadatos como status, headers y un body que debes procesar con métodos como json, blob o text.

¿Cómo accedo al body de la respuesta con json?

El body de una respuesta no viene listo para usarse. Para obtenerlo necesitas invocar otra promesa con el método .json(), que parsea el contenido y te entrega el objeto JavaScript final [02:30].

Esta cadena de promesas funciona bien para casos simples, pero cuando manipulas información compleja conviene usar async/await, que hace el código mucho más legible:

javascript const response = await fetch("https://api.escuelajs.co/api/v1/products"); const jsonResponse = await response.json();

Sin el await, la constante response quedaría como una promesa pendiente. Con await le dices a JavaScript que espere hasta que la petición se resuelva antes de continuar.

¿Cómo manejo errores en fetch?

Fetch es generoso con los errores: si la API responde con un código de error como un 404 o un 400, igual te entrega el objeto response, pero con response.ok en false. Puedes validarlo así:

javascript if (!response.ok) { throw new Error("No es posible encontrar el producto"); }

En cambio, cuando hay un error de conexión (por ejemplo, un protocolo inexistente como httpx:// o un dominio que no existe), Fetch sí lanza una excepción real. Ese error lo puedes capturar con un bloque try/catch o con el método .catch() si trabajas con promesas encadenadas [05:00].

¿Cuándo fetch lanza un error? Solo cuando hay fallos de red o conexión. Si la API responde con 400 o 500, fetch considera la petición exitosa y debes validar response.ok manualmente.

¿Cómo manipulo respuestas que no son JSON?

No todas las APIs responden en JSON. El método .json() falla si el contenido es una imagen, un audio o texto plano. Para esos casos existen otros métodos según el tipo de contenido:

.json() para respuestas tipo application/json.
.blob() para imágenes, videos o archivos binarios.
.text() para respuestas de tipo text/plain.

Un detalle importante: el body de un response solo se puede consumir una vez. Si invocas .blob() y luego intentas .json() sobre el mismo response, vas a recibir un error que dice que el body ya fue usado. La solución es volver a hacer la petición [07:30].

¿Cómo sé qué método usar según la respuesta?

La clave está en el header Content-Type que devuelve el servidor. Puedes inspeccionarlo así:

javascript const request = await fetch("https://platzi.com/llms.txt"); const contentType = request.headers.get("Content-Type");

Si el Content-Type es application/json, usas .json(). Si es text/plain, usas .text(). Si es una imagen o archivo binario, usas .blob(). Por ejemplo, el archivo llms.txt de Platzi devuelve texto plano con información sobre la plataforma [09:00].

¿Cómo cambio el verbo HTTP y envío headers personalizados?

Por defecto, Fetch usa el verbo GET. Para modificarlo, el segundo parámetro de fetch es un objeto de configuración donde puedes especificar el método y los headers que necesites:

javascript fetch("https://api.escuelajs.co/api/v1/products", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json", "Authorization": "Bearer TU_TOKEN_AQUI" } });

Puedes usar cualquier verbo válido del protocolo HTTP: POST, PUT, PATCH o DELETE. Los headers más comunes incluyen:

Content-Type: indica el formato del contenido que envías.
Accept: especifica el formato que esperas recibir.
Authorization: envía el token de autenticación, normalmente con el esquema Bearer seguido de un JWT.

Con estos elementos ya tienes el control completo sobre tus peticiones: cambiar el verbo, enviar headers de autenticación y procesar respuestas en cualquier formato. ¿Qué API te gustaría consumir primero con Fetch? Cuéntalo en los comentarios.

Gonzalo Tomas Orlando

Hace 6 meses

Solucion a problemas de consola.

Lo que hacemos es cambiar la url que esta hardcodeada y caida por un lado, y por otro cambiar cuando viene la respuesta de la API con la misma URL que esta caida.

En repositories.js poner

class ProductRepository {
  constructor(url) {
    this.url = url;
  }

  async getProducts(categoryId) {
    const filterParams = new URLSearchParams();
    if (categoryId) {
      filterParams.append("categoryId", categoryId);
    }

    let url = `${this.url}/products/`;

    if (filterParams.size > 0) {
      url = `${url}?${filterParams}`;
    }

    const response = await fetch(url);

    if (
      !response.ok &&
      !response.headers.get("content-type") != "applicacion/json"
    ) {
      throw new Error("No fue posible encontrar los productos");
    }
    const responseData = await response.json();
    return responseData.map((p) => ({
      ...p,
      images: p.images.map((img) =>
        img.includes("placeimg") ? "https://picsum.photos/640/480" : img,
      ),
    }));
  }

  async getProduct(id) {
    const response = await fetch(`${this.url}/products/${id}/`);
    if (
      !response.ok &&
      !response.headers.get("content-type") != "applicacion/json"
    ) {
      throw new Error("No fue posible encontrar los productos");
    }
    const responseData = await response.json();
    return responseData.map((p) => ({
      ...p,
      images: p.images.map((img) =>
        img.includes("placeimg") ? "https://picsum.photos/640/480" : img,
      ),
    }));
  }

  async createProduct(product) {
    const url = `${this.url}/products/`;
    const response = await fetch(url, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(product),
    });

    if (!response.ok) {
      throw new Error(
        `No se pudo crear el producto, con status code ${response.status}`,
      );
    }

    const jsonResponse = await response.json();
    return jsonResponse;
  }

  async editProduct(productId, productData) {
    const url = `${this.url}/products/${productId}/`;
    const response = await fetch(url, {
      method: "PUT",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(productData),
    });

    if (!response.ok) {
      throw new Error(
        `No se puede actualizar el producto ${productId}: ${response.status}`,
      );
    }

    const jsonResponse = await response.json();
    return jsonResponse;
  }

  async deleteProduct(productId) {
    const url = `${this.url}/products/${productId}/`;
    const response = await fetch(url, {
      method: "DELETE",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    });
    return response.ok;
  }
}

window.productRepository = new ProductRepository(
  "https://api.escuelajs.co/api/v1",
);

Y en index.js

/**
 * Index JavaScript - Lógica específica del catálogo de productos
 * Maneja: listado, búsqueda, filtrado y eliminación de productos
 */

// ===== ESTADO DE LA APLICACIÓN =====
let currentProducts = [...MOCK_PRODUCTS];
let currentCategory = "";
let currentSearch = "";
let productToDelete = null;

// ===== ELEMENTOS DEL DOM =====
let productsGrid;
let emptyState;
let searchInput;
let categoryFilter;
let deleteModal;

// ===== INICIALIZACIÓN =====
document.addEventListener("DOMContentLoaded", async () => {
  await initializeCatalog();
});

/**
 * Inicializa el catálogo de productos
 */
async function initializeCatalog() {
  // Obtener elementos del DOM
  productsGrid = document.getElementById("productsGrid");
  emptyState = document.getElementById("emptyState");
  searchInput = document.getElementById("searchInput");
  categoryFilter = document.getElementById("categoryFilter");
  deleteModal = document.getElementById("deleteModal");

  // Inicializar componentes
  populateCategories(categoryFilter);
  bindEventListeners();

  const repository = window.productRepository;
  const productResponse = await repository.getProducts();
  console.log(productResponse);

  // Simular carga inicial
  simulateLoading(() => {
    renderProducts(productResponse);
  });
}

// ===== RENDERIZADO DE PRODUCTOS =====

/**
 * Renderiza la lista de productos en el catálogo
 * @param {Array} products - Array de productos a mostrar
 */
function renderProducts(products) {
  hideAllStates();

  if (products.length === 0) {
    emptyState.style.display = "block";
    return;
  }

  productsGrid.innerHTML = products
    .map(
      (product) => `
        <article class="product-card">
            <a href="detail.html?id=${product.id}" class="product-card-link">
                <img 
                    src="${product.images[0]}" 
                    alt="${product.title}"
                    class="product-image"
                    onerror="this.src='https://placehold.co/280x200?text=No+Image'"
                >
            </a>
            <div class="product-content">
                <div class="product-category">${product.category.name}</div>
                <h3 class="product-title">
                    <a href="detail.html?id=${product.id}" class="product-title-link">${product.title}</a>
                </h3>
                <p class="product-description">${product.description}</p>
                <div class="product-footer">
                    <span class="product-price">$${product.price}</span>
                    <div class="product-actions">
                        <a href="detail.html?id=${product.id}" class="btn btn-primary btn-sm">
                            👁️ Ver
                        </a>
                        <a href="edit.html?id=${product.id}" class="btn btn-secondary btn-sm">
                            ✏️ Editar
                        </a>
                        <button 
                            onclick="showDeleteModal(${product.id})"
                            class="btn btn-danger btn-sm"
                        >
                            🗑️ Eliminar
                        </button>
                    </div>
                </div>
            </div>
        </article>
    `,
    )
    .join("");
}

// ===== FILTRADO Y BÚSQUEDA =====

/**
 * Filtra productos según categoría y búsqueda actual
 */
async function filterProducts() {
  let filtered = [...MOCK_PRODUCTS];

  // Filtrar por categoría
  if (currentCategory) {
    filtered = filtered.filter(
      (product) => product.category.id.toString() === currentCategory,
    );
  }

  // Filtrar por búsqueda
  if (currentSearch) {
    filtered = filtered.filter(
      (product) =>
        product.title.toLowerCase().includes(currentSearch.toLowerCase()) ||
        product.description.toLowerCase().includes(currentSearch.toLowerCase()),
    );
  }

  currentProducts = filtered;
  renderProducts(filtered);
}

// ===== EVENTOS =====

/**
 * Configura todos los event listeners del catálogo
 */
function bindEventListeners() {
  // Búsqueda en tiempo real
  searchInput.addEventListener("input", (e) => {
    currentSearch = e.target.value;
    filterProducts();
  });

  // Filtro por categoría
  categoryFilter.addEventListener("change", (e) => {
    currentCategory = e.target.value;
    filterProducts();
  });

  // Modal de eliminación
  if (deleteModal) {
    document
      .getElementById("confirmDelete")
      .addEventListener("click", deleteProduct);
    document
      .getElementById("cancelDelete")
      .addEventListener("click", hideDeleteModal);
  }
}

// ===== ELIMINACIÓN DE PRODUCTOS =====

/**
 * Muestra el modal de confirmación para eliminar producto
 * @param {number} productId - ID del producto a eliminar
 */
function showDeleteModal(productId) {
  productToDelete = productId;
  const product = findProductById(productId);

  // Obtener el modal cada vez por si no estaba inicializado
  const modal = deleteModal || document.getElementById("deleteModal");

  if (product && modal) {
    // Actualizar texto del modal con nombre del producto
    const modalText = document.querySelector("#deleteModal p");
    if (modalText) {
      modalText.textContent = `¿Estás seguro de que quieres eliminar "${product.title}"?`;
    }

    modal.style.display = "flex";
  }
}

/**
 * Oculta el modal de confirmación
 */
function hideDeleteModal() {
  productToDelete = null;
  const modal = deleteModal || document.getElementById("deleteModal");
  if (modal) {
    modal.style.display = "none";
  }
}

/**
 * Elimina el producto seleccionado
 */
function deleteProduct() {
  if (!productToDelete) return;

  const confirmBtn = document.getElementById("confirmDelete");

  // Mostrar estado de carga en el botón
  if (confirmBtn) {
    confirmBtn.innerHTML = '<div class="spinner"></div> Eliminando...';
  }

  // Simular operación de eliminación
  setTimeout(() => {
    // Eliminar del array mock
    const wasDeleted = removeProductFromMock(productToDelete);

    hideDeleteModal();

    if (wasDeleted) {
      showMessage(MOCK_MESSAGES.delete.success, "success");
      // Re-renderizar la lista filtrada
      filterProducts();
    } else {
      showMessage(MOCK_MESSAGES.delete.error, "error");
    }

    // Restaurar botón
    if (confirmBtn) {
      confirmBtn.innerHTML = "Eliminar";
    }
  }, 1000);
}

// ===== FUNCIONES AUXILIARES =====

/**
 * Actualiza el catálogo después de cambios externos
 * Útil cuando se regresa desde crear/editar producto
 */
function refreshCatalog() {
  currentProducts = [...MOCK_PRODUCTS];
  filterProducts();
}

// Exponer función global para que otras páginas puedan actualizar el catálogo
window.refreshCatalog = refreshCatalog;

// Exponer función global para el onclick del botón eliminar
window.showDeleteModal = showDeleteModal;

Fundamentos HTTP

Cómo JavaScript habla con una API

Cómo funciona el protocolo HTTP entre JavaScript y APIs

Qué significan los códigos de estado HTTP

Headers HTTP: qué son y cómo funcionan

Peticiones HTTP reales en el navegador

APIs y REST para consumidores

Como APIs usam HTTP para conectar apps

Qué es REST y cómo organiza las APIs web

Documentación de API REST con editor de texto

Setup y Arquitectura Base

Configuración de template de tienda virtual para consumir API REST

Peticiones HTTP con Fetch en JavaScript

Patrón repositorio para centralizar fetch

Métodos HTTP en práctica con FakeStoreAPI

Integración de productos y detalle con fetch

Filtrar productos por categoría con URLSearchParams

Crear productos con fetch y POST

Edición de productos con verbo PUT en JavaScript

Cómo implementar DELETE en un repositorio

Optimización y próximos pasos

APIs REST con JavaScript dominadas

Peticiones HTTP con Fetch en JavaScript

Progreso del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

Recursos

Recursos