Fetch en JavaScript: progreso de descarga

En el desarrollo web moderno, manejar las solicitudes HTTP de manera eficiente es fundamental. La API Fetch se ha convertido en la solución predeterminada para realizar solicitudes de red en JavaScript. Este artículo se adentra en el dominio de la API Fetch, centrándose en cómo rastrear el progreso de descarga. Exploraremos varios métodos, proporcionaremos ejemplos de código del mundo real y compartiremos consejos profesionales para mejorar tu comprensión e implementación de la API Fetch.

Rastreo del progreso de descarga

Una de las características avanzadas de la API Fetch es la capacidad de rastrear el progreso de una descarga. Esto es particularmente útil para archivos grandes o al proporcionar retroalimentación al usuario durante operaciones prolongadas.

Uso de ReadableStreams

Para rastrear el progreso de la descarga, podemos utilizar la interfaz ReadableStream. Esto nos permite leer el cuerpo de la respuesta en fragmentos y monitorear el progreso.

Nota: ReadableStream es ampliamente compatible con los navegadores modernos. Para el soporte de navegadores heredados, considera usar la API XMLHttpRequest con su evento onprogress.

Output appears here after Run.

La función fetchWithProgress obtiene datos de una URL especificada y rastrea el progreso de la descarga. Lee el cuerpo de la respuesta en fragmentos utilizando la interfaz ReadableStream y llama a la devolución de llamada onProgress con la longitud recibida y la longitud total del contenido. Los datos descargados se reconstruyen a partir de los fragmentos y se devuelven como una cadena decodificada.

nota
La función intenta leer automáticamente el encabezado Content-Length. Si falta el encabezado (común en transferencias fragmentadas o compresión), utiliza el parámetro fallbackSize como alternativa. En producción, el desarrollador o el servidor debe proporcionar este tamaño de respaldo. Para archivos grandes, evita almacenar todos los fragmentos en memoria; procésalos de forma incremental o usa response.blob() para respuestas que no sean texto.

Mostrar el progreso a los usuarios

Para proporcionar retroalimentación a los usuarios, podemos integrar una barra de progreso que se actualice a medida que avanza la descarga.

html

<body>
  <div id="progress-bar" style="width: 100%; background-color: #e0e0e0;">
    <div id="progress" style="width: 0; height: 20px; background-color: #76c7c0;"></div>
  </div>
  <div id="output"></div>
  <script>
    function updateProgressBar(received, total) {
      const progressElement = document.getElementById('progress');
      const percentage = Math.min(100, (received / total) * 100);
      progressElement.style.width = percentage + '%';
    }
    document.addEventListener('DOMContentLoaded', () => {
      const url = 'https://www.w3docs.com/uploads/media/default/0001/05/dd10c28a7052fb6d2ff13bc403842b797a73ff3b.txt';
      const size = 3_900_000; // fallback size
      // fetchWithProgress is defined in the previous code block
      fetchWithProgress(url, updateProgressBar, size)
      .then(data => {
        document.getElementById('output').textContent = 'File content: ' + data.slice(0, 1000) + '...';
      })
      .catch(err => console.error("Download failed:", err));
    });
  </script>
</body>

Try it Yourself »

advertencia
Si estás descargando un archivo muy grande, evita actualizar la interfaz de usuario con demasiada frecuencia. Por ejemplo, en lugar de actualizar la barra de progreso por cada fragmento individual, puedes actualizarla con menos frecuencia (por ejemplo, cada pocos fragmentos o basándote en un intervalo de tiempo). Esto ayuda a mantener tu interfaz de usuario ligera.

Los elementos HTML del ejemplo anterior configuran una barra de progreso para visualizar el progreso de la descarga y un área de texto preformateado para mostrar el contenido descargado. El div progress-bar sirve como contenedor, y el div progress representa el progreso real de la descarga.

El código JavaScript actualiza la barra de progreso en función de la longitud de los datos recibidos y la longitud total del contenido. La función updateProgressBar calcula el porcentaje de datos descargados y ajusta el ancho de la barra de progreso en consecuencia. El oyente de eventos activa la función fetchWithProgress al cargar la página, actualizando la barra de progreso y mostrando el contenido descargado en el elemento output.

Nota: fetchWithProgress está definida en el fragmento anterior. En un proyecto real, asegúrate de que esté en el ámbito correspondiente (por ejemplo, mediante importaciones de módulos, empaquetado o una etiqueta de script global).

Consejos profesionales

Manejar datos binarios: TextDecoder solo funciona para texto. Usa response.blob() o response.arrayBuffer() para archivos binarios.
Limitar actualizaciones de progreso: Las lecturas rápidas de fragmentos pueden bloquear el hilo de la interfaz de usuario. Limita o desactiva la devolución de llamada de progreso.
Gestión de memoria: Evita almacenar todos los fragmentos en un array para archivos grandes. Procésalos de forma incremental.
Alternativa para Content-Length: El encabezado a menudo falta. Proporciona siempre un fallbackSize confiable.
Optimizar la retroalimentación del usuario: Proporcionar retroalimentación en tiempo real sobre el progreso de la descarga mejora la satisfacción del usuario y puede hacer que tu aplicación se sienta más receptiva.
Aprovechar las capacidades del navegador: Diferentes navegadores pueden tener un soporte variable para características avanzadas. Prueba tu implementación en varios navegadores para garantizar la compatibilidad.
Simplificar cuando sea posible: Para descargas donde no se requiere estrictamente el progreso en streaming, response.arrayBuffer() ofrece una forma más sencilla de reconstruir los datos sin concatenar fragmentos manualmente.

Con estos conocimientos y ejemplos, ahora estás equipado para implementar la API Fetch con seguimiento de progreso de descarga en tus proyectos, ofreciendo a los usuarios una experiencia fluida e informativa.

Conclusión

Dominar la API Fetch implica comprender no solo cómo realizar solicitudes básicas, sino también cómo manejar escenarios más avanzados, como el seguimiento del progreso de descarga. Al usar ReadableStreams, podemos monitorear y proporcionar retroalimentación sobre las descargas, mejorando significativamente la experiencia del usuario. Implementar estas técnicas garantizará que tus aplicaciones sean robustas, fáciles de usar y capaces de manejar transferencias de datos grandes de manera eficiente.

Práctica

¿Cuáles son los pasos clave para rastrear el progreso de descarga usando la API Fetch?

Usa la interfaz ReadableStream para leer el cuerpo de la respuesta en fragmentos.Actualiza directamente el DOM con cada fragmento leído del cuerpo de la respuesta.Implementa manejo de errores para capturar cualquier problema durante el proceso de fetch.Realiza operaciones sincrónicas dentro del bucle de seguimiento de progreso.Calcula el porcentaje de datos descargados y actualiza la barra de progreso en consecuencia.

Fetch en JavaScript: progreso de descarga ​

Rastreo del progreso de descarga ​

Uso de ReadableStreams ​

Mostrar el progreso a los usuarios ​

Consejos profesionales ​

Conclusión ​