Manejo de Errores y Estados de Carga con Fetch API en JavaScript, Diapositivas de Tecnologías de la Información y la Comunicación

¡Descarga Manejo de Errores y Estados de Carga con Fetch API en JavaScript y más Diapositivas en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!

JavaScript

Ivan Dario Duque M.

Índice

Manejo de Errores y Estados de Carga con Fetch

● Errores y carga con Fetch

● Errores con .catch() en Fetch

● Usar try...catch con `async/await

● Mostrar un Mensaje de Error al Usuario

● Mostrar Estado de Carga

● Proyecto Práctico - App de Posts

● Proyecto Practico 2 - App del Clima con Estado

de Carga y Mensajes de Error

Errores con .catch() en Fetch❌

Ejemplo:

fetch("https://api-falsa.com/data")

.then(res => res.json())

.then(data => console.log(data))

.catch(error => console.error("Error al obtener los datos:", error));

📌 Explicación:

• .catch() captura errores de red o de código.
• Ideal para mostrar mensajes de error personalizados al usuario.

Usar try...catch con `async/await 🔄

Ejemplo:

async function obtenerDatos() { try { let res = await fetch("https://jsonplaceholder.typicode.com/users"); let data = await res.json(); console.log(data); } catch (error) { console.error("Hubo un problema:", error); } } obtenerDatos();

📌 Ventaja: Código más limpio y legible para manejar errores.

Mostrar Estado de Carga ⏳

HTML:

html

JS:

javascript document.getElementById("estado").textContent = "Cargando..."; fetch("https://jsonplaceholder.typicode.com/posts") .then(res => res.json()) .then(data => { mostrarDatos(data); document.getElementById("estado").textContent = ""; }) .catch(err => { document.getElementById("estado").textContent = "Error al cargar."; }); 📌 Explicación :Muestra texto mientras se hace la petición y lo reemplaza según el resultado.

Proyecto Práctico - App de Posts 📰

Objetivo: Mostrar una lista de publicaciones desde una API y gestionar errores y carga.

Se debe trabajar con esta API:

https://jsonplaceholder.typicode.com/post

HTML:

📌 Resultado: El usuario ve publicaciones o un error si algo falla

Proyecto Práctico 2 - App del Clima con

Estado de Carga y Mensajes de Error

API sugerida (sin API key):

https://wttr.in/{ciudad}?format=j

Ejemplo de Uso:

https://wttr.in/Bogota?format=j

HTML:

Buscar clima

Proyecto Practico 3 - Buscador de Productos

Simulado

Objetivo : Simular una búsqueda de productos, mostrando “Cargando...”, los resultados, o un mensaje de error si falla.

API sugerida: https://fakestoreapi.com/products (devuelve una lista de productos)

HTML: