JavaScript Fetch: Downloadfortschritt

In der modernen Webentwicklung ist der effiziente Umgang mit HTTP-Anfragen von größter Bedeutung. Die Fetch API hat sich zur bevorzugten Lösung für Netzwerkanfragen in JavaScript entwickelt. Dieser Artikel befasst sich mit dem Beherrschen der Fetch API und konzentriert sich darauf, wie sich der Downloadfortschritt verfolgen lässt. Wir werden verschiedene Methoden untersuchen, praxisnahe Codebeispiele bereitstellen und professionelle Tipps teilen, um Ihr Verständnis und Ihre Implementierung der Fetch API zu verbessern.

Downloadfortschritt verfolgen

Eine der fortgeschrittenen Funktionen der Fetch API ist die Möglichkeit, den Fortschritt eines Downloads zu verfolgen. Dies ist besonders nützlich bei großen Dateien oder wenn während langwieriger Vorgänge eine Rückmeldung an den Benutzer gegeben werden soll.

Verwendung von ReadableStreams

Um den Downloadfortschritt zu verfolgen, können wir die ReadableStream-Schnittstelle nutzen. Damit können wir den Antwortkörper in Chunks lesen und den Fortschritt überwachen.

Hinweis: ReadableStream wird von modernen Browsern weitgehend unterstützt. Für die Unterstützung älterer Browser sollten Sie die XMLHttpRequest-API mit ihrem onprogress-Ereignis in Betracht ziehen.

Output appears here after Run.

Die Funktion fetchWithProgress ruft Daten von einer angegebenen URL ab und verfolgt den Downloadfortschritt. Sie liest den Antwortkörper mithilfe der ReadableStream-Schnittstelle in Chunks und ruft den Callback onProgress mit der empfangenen Länge und der gesamten Inhaltslänge auf. Die heruntergeladenen Daten werden anschließend aus den Chunks rekonstruiert und als dekodierter String zurückgegeben.

Hinweis
Die Funktion versucht, den Content-Length-Header automatisch auszulesen. Wenn der Header fehlt (was bei Chunked Transfers oder Komprimierung häufig vorkommt), greift sie auf den Parameter fallbackSize zurück. In der Produktion muss der Entwickler oder der Server diese Fallback-Größe bereitstellen. Bei großen Dateien sollten Sie vermeiden, alle Chunks im Speicher zu puffern; verarbeiten Sie sie schrittweise oder verwenden Sie response.blob() für Nicht-Text-Antworten.

Fortschritt für Benutzer anzeigen

Um den Benutzern Rückmeldung zu geben, können wir eine Fortschrittsleiste integrieren, die sich während des Downloads aktualisiert.

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 = 'Dateiinhalt: ' + data.slice(0, 1000) + '...';
      })
      .catch(err => console.error("Download failed:", err));
    });
  </script>
</body>

Try it Yourself »

Warnung
Wenn Sie eine sehr große Datei herunterladen, vermeiden Sie es, die Benutzeroberfläche zu häufig zu aktualisieren. Anstatt beispielsweise die Fortschrittsleiste für jeden einzelnen Chunk zu aktualisieren, können Sie dies seltener tun (z. B. alle paar Chunks oder basierend auf einem Zeitintervall). Das hilft, Ihre Benutzeroberfläche schlank zu halten.

Die HTML-Elemente im obigen Beispiel richten eine Fortschrittsleiste ein, um den Downloadfortschritt zu visualisieren, sowie einen vorformatierten Textbereich, um den heruntergeladenen Inhalt anzuzeigen. Das progress-bar-div dient als Container, und das progress-div stellt den eigentlichen Fortschritt des Downloads dar.

Der JavaScript-Code aktualisiert die Fortschrittsleiste basierend auf der empfangenen Datenlänge und der gesamten Inhaltslänge. Die Funktion updateProgressBar berechnet den Prozentsatz der heruntergeladenen Daten und passt die Breite der Fortschrittsleiste entsprechend an. Der Event-Listener löst die Funktion fetchWithProgress beim Laden der Seite aus, aktualisiert die Fortschrittsleiste und zeigt den heruntergeladenen Inhalt im output-Element an.

Hinweis: fetchWithProgress ist im vorherigen Snippet definiert. Stellen Sie in einem realen Projekt sicher, dass es im Gültigkeitsbereich verfügbar ist (z. B. über Modulimporte, Bundling oder ein globales Script-Tag).

Professionelle Tipps

Binärdaten behandeln: TextDecoder funktioniert nur für Text. Verwenden Sie response.blob() oder response.arrayBuffer() für Binärdateien.
Fortschrittsaktualisierungen drosseln: Schnelle Chunk-Lesevorgänge können den UI-Thread blockieren. Drosseln oder entprellen Sie den Fortschritts-Callback.
Speicherverwaltung: Vermeiden Sie es, alle Chunks für große Dateien in einem Array zu speichern. Verarbeiten Sie sie schrittweise.
Fallback für Content-Length: Der Header fehlt oft. Stellen Sie immer eine zuverlässige fallbackSize bereit.
Benutzerfeedback optimieren: Echtzeit-Feedback zum Downloadfortschritt erhöht die Benutzerzufriedenheit und kann Ihre Anwendung reaktionsschneller wirken lassen.
Browser-Funktionen nutzen: Verschiedene Browser können unterschiedliche Unterstützung für fortgeschrittene Funktionen bieten. Testen Sie Ihre Implementierung in mehreren Browsern, um die Kompatibilität sicherzustellen.
Vereinfachen, wenn möglich: Für Downloads, bei denen Streaming-Fortschritt nicht zwingend erforderlich ist, bietet response.arrayBuffer() eine einfachere Möglichkeit, Daten ohne manuelles Zusammenfügen von Chunks wiederherzustellen.

Mit diesen Erkenntnissen und Beispielen sind Sie nun in der Lage, die Fetch API mit Downloadfortschrittsverfolgung in Ihren Projekten zu implementieren und Ihren Benutzern eine nahtlose und informative Erfahrung zu bieten.

Fazit

Das Beherrschen der Fetch API umfasst nicht nur das Verständnis, wie grundlegende Anfragen gestellt werden, sondern auch, wie fortgeschrittene Szenarien wie das Verfolgen des Downloadfortschritts behandelt werden. Durch die Verwendung von ReadableStreams können wir Downloads überwachen und Rückmeldung dazu geben, was die Benutzererfahrung erheblich verbessert. Die Implementierung dieser Techniken stellt sicher, dass Ihre Anwendungen robust, benutzerfreundlich und in der Lage sind, große Datenübertragungen effizient zu verarbeiten.

Practice

What are the key steps to track download progress using the Fetch API?

Use the ReadableStream interface to read the response body in chunks.Directly update the DOM with every chunk read from the response body.Implement error handling to catch any issues during the fetch process.Perform synchronous operations within the progress tracking loop.Calculate the percentage of downloaded data and update the progress bar accordingly.

JavaScript Fetch: Downloadfortschritt ​

Downloadfortschritt verfolgen ​

Verwendung von ReadableStreams ​

Fortschritt für Benutzer anzeigen ​

Professionelle Tipps ​

Fazit ​