Integradora 2. AJAX y Fetch API

10-SEP-2024

Asesor: Ing. Oscar Gregorio Silva MaresPor: Tanya S. Medina Cárdenas

Desarrollo para front end

Integradora 2. AJAX y Fetch API

Se crea una página web con un formulario de búsqueda y una tabla donde se mostrarán los resultados

Se usa la función asíncrona fetch para traer los datos de un servidor remoto.fetch devuelve una promise.Una vez que la promesa es resuelta (cuando la solicitud al servidor se completa y los datos llegan), el bloque de código dentro de .then() se ejecuta.El primer .then() transforma la respuesta en JSON, y el segundo .then() toma esos datos y los procesa (filtra los usuarios, por ejemplo).Si ocurre un error durante la solicitud (por ejemplo, el servidor no responde o la conexión falla), el bloque .catch() se ejecuta.

Programación asíncrona

• Inicia la solicitud: Cuando el usuario envía el formulario, llamas a fetch, que envía una solicitud HTTP al servidor de forma asíncrona.

• Mostrar el spinner: Inmediatamente después de iniciar la solicitud, se muestra un spinner (o un mensaje de "Cargando...") en la tabla, mientras los datos del servidor aún no han llegado.

• La promesa es resuelta: Una vez que el servidor responde, el código en .then() procesa la respuesta y muestra los datos en la tabla.

• Errores: Si algo falla, el código en .catch() muestra un mensaje de error en la tabla.

Flujo asíncrono

- Se usó bootstrap para el CSS.

- Se usa event.preventDefault(); para prevenir que la página se recargue.

- Se escucha evento de envío de formulario con . addEventListener.

Notas adicionales

¿Por qué es importante?

Si no se usara programación asíncrona, el navegador se quedaría "congelado" mientras espera la respuesta del servidor, haciendo que la interfaz sea poco interactiva para el usuario. Gracias a la asincronía, se pueden seguir mostrando actualizaciones visuales, como el spinner de "Cargando...", mientras el usuario espera a que la solicitud se complete.

Reflexión

• Fernández, P. E. (2020). Domine JavaScript. 4a Edición (4.a ed.). Madrid, España: RA-MA. (Pp. 123-139 y 285-306)
• ColorCode [@ColorCodeio]. (s/f). Async JavaScript & callback functions -- tutorial for beginners. Youtube. Recuperado el 10 de septiembre de 2024, de https://www.youtube.com/watch?v=QSqc6MMS6Fk&t=1320s
• ColorCode [@ColorCodeio]. (s/f). JavaScript promises -- tutorial for beginners. Youtube. Recuperado el 10 de septiembre de 2024, de https://www.youtube.com/watch?v=TnhCX0KkPqs
• Contreras, M. (2021, octubre 5). Tutorial async/await de JavaScript: Aprende callbacks, promesas y async/await en JS haciendo helados ??? freecodecamp.org. https://www.freecodecamp.org/espanol/news/tutorial-async-await-de-javascript-aprende-callbacks-promesas-y-async-await-en-js-haciendo-helados/
• Fazt [@FaztTech]. (s/f). Javascript Async Await, Promesas y Callbacks. Youtube. Recuperado el 10 de septiembre de 2024, de https://www.youtube.com/watch?si=gARjB1x4mwvCEo7G&v=Q3HtXuDEy5s&feature=youtu.be
• midulive [@midulive]. (s/f). Callbacks vs Promises en JavaScript. ¡Entiende las diferencias y la importancia de cada una! Youtube. Recuperado el 10 de septiembre de 2024, de https://www.youtube.com/watch?v=frm0CHyeSbE
• Platzi [@Platzi]. (s/f). Cómo funciona el asincronismo en JavaScript. Youtube. Recuperado el 10 de septiembre de 2024, de https://www.youtube.com/watch?v=bWvnWhVCHAc
• Español, P. en [@programacion-es]. (s/f). ¿Cómo funciona la asincronía en JavaScript? Youtube. Recuperado el 10 de septiembre de 2024, de https://www.youtube.com/watch?v=ZIToNxQof2I
• Más, P. y. [@programacionymas]. (s/f). Ajax, Fetch, Axios & jQuery 5 minutos Desde cero. Youtube. Recuperado el 10 de septiembre de 2024, de https://www.youtube.com/watch?v=DaGI20KYgS8
• Avila, H. (2021, febrero 5). Como Usar Fetch para Solicitudes AJAX en JavaScript. freecodecamp.org. https://www.freecodecamp.org/espanol/news/como-usar-fetch-para-solicitudes-ajax-en-javascript/

Referencias