JavaScript Fetch : progression du téléchargement

Dans le développement web moderne, la gestion efficace des requêtes HTTP est primordiale. L'API Fetch est devenue la solution de référence pour effectuer des requêtes réseau en JavaScript. Cet article explore en profondeur la maîtrise de l'API Fetch, en se concentrant sur le suivi de la progression du téléchargement. Nous examinerons différentes méthodes, fournirons des exemples de code concrets et partagerons des conseils professionnels pour améliorer votre compréhension et votre mise en œuvre de l'API Fetch.

Suivi de la progression du téléchargement

L'une des fonctionnalités avancées de l'API Fetch est la capacité de suivre la progression d'un téléchargement. Cela est particulièrement utile pour les gros fichiers ou lors de la fourniture d'un retour d'information à l'utilisateur pendant des opérations longues.

Utilisation des ReadableStreams

Pour suivre la progression du téléchargement, nous pouvons utiliser l'interface ReadableStream. Cela nous permet de lire le corps de la réponse par blocs et de surveiller la progression.

Note : ReadableStream est largement pris en charge dans les navigateurs modernes. Pour la compatibilité avec les anciens navigateurs, envisagez d'utiliser l'API XMLHttpRequest avec son événement onprogress.

Output appears here after Run.

La fonction fetchWithProgress récupère les données depuis une URL spécifiée et suit la progression du téléchargement. Elle lit le corps de la réponse par blocs à l'aide de l'interface ReadableStream et appelle la fonction de rappel onProgress avec la longueur reçue et la longueur totale du contenu. Les données téléchargées sont ensuite reconstituées à partir des blocs et retournées sous forme de chaîne décodée.

note
La fonction tente de lire automatiquement l'en-tête Content-Length. Si cet en-tête est absent (fréquent avec les transferts par blocs ou la compression), elle utilise la valeur du paramètre fallbackSize. En production, le développeur ou le serveur doit fournir cette taille de secours. Pour les gros fichiers, évitez de mettre en mémoire tampon tous les blocs ; traitez-les de manière incrémentale ou utilisez response.blob() pour les réponses non textuelles.

Affichage de la progression à l'utilisateur

Pour fournir un retour d'information aux utilisateurs, nous pouvons intégrer une barre de progression qui se met à jour au fur et à mesure du téléchargement.

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 »

WARNING

Si vous téléchargez un fichier très volumineux, évitez de mettre à jour l'interface utilisateur trop fréquemment. Par exemple, au lieu de mettre à jour la barre de progression pour chaque bloc, vous pouvez le faire moins souvent (par exemple, tous les quelques blocs ou selon un intervalle de temps). Cela permet de garder votre interface légère.

Les éléments HTML de l'exemple ci-dessus configurent une barre de progression pour visualiser l'avancement du téléchargement et une zone de texte préformatée pour afficher le contenu téléchargé. Le div progress-bar sert de conteneur, et le div progress représente la progression réelle du téléchargement.

Le code JavaScript met à jour la barre de progression en fonction de la longueur des données reçues et de la longueur totale du contenu. La fonction updateProgressBar calcule le pourcentage de données téléchargées et ajuste la largeur de la barre de progression en conséquence. L'écouteur d'événements déclenche la fonction fetchWithProgress au chargement de la page, mettant à jour la barre de progression et affichant le contenu téléchargé dans l'élément output.

Note : fetchWithProgress est définie dans le bloc de code précédent. Dans un projet réel, assurez-vous qu'elle est accessible (par exemple, via des imports de modules, un bundler ou une balise script globale).

Conseils professionnels

Gérer les données binaires : TextDecoder ne fonctionne qu'avec du texte. Utilisez response.blob() ou response.arrayBuffer() pour les fichiers binaires.
Limiter les mises à jour de progression : Des lectures de blocs trop rapides peuvent bloquer le thread de l'interface utilisateur. Limitez ou débouncez la fonction de rappel de progression.
Gestion de la mémoire : Évitez de stocker tous les blocs dans un tableau pour les gros fichiers. Traitez-les de manière incrémentale.
Valeur de secours pour Content-Length : L'en-tête est souvent absent. Fournissez toujours une fallbackSize fiable.
Optimiser le retour utilisateur : Fournir un retour en temps réel sur la progression du téléchargement améliore la satisfaction utilisateur et rend votre application plus réactive.
Exploiter les capacités des navigateurs : Différents navigateurs peuvent avoir des niveaux de prise en charge variables pour les fonctionnalités avancées. Testez votre implémentation sur plusieurs navigateurs pour garantir la compatibilité.
Simplifier lorsque c'est possible : Pour les téléchargements où un suivi en streaming n'est pas strictement requis, response.arrayBuffer() offre un moyen plus simple de reconstituer les données sans concaténer manuellement les blocs.

Grâce à ces informations et exemples, vous êtes désormais en mesure d'implémenter l'API Fetch avec un suivi de progression de téléchargement dans vos projets, offrant ainsi aux utilisateurs une expérience fluide et informative.

Conclusion

Maîtriser l'API Fetch implique de comprendre non seulement comment effectuer des requêtes de base, mais aussi comment gérer des scénarios plus avancés tels que le suivi de la progression du téléchargement. En utilisant les ReadableStreams, nous pouvons surveiller et fournir un retour sur les téléchargements, améliorant ainsi considérablement l'expérience utilisateur. La mise en œuvre de ces techniques garantira que vos applications sont robustes, conviviales et capables de gérer efficacement les transferts de données volumineux.

Pratique

Quelles sont les étapes clés pour suivre la progression du téléchargement à l'aide de l'API Fetch ?

Utiliser l'interface ReadableStream pour lire le corps de la réponse par blocs.Mettre directement à jour le DOM pour chaque bloc lu dans le corps de la réponse.Mettre en place une gestion des erreurs pour détecter les problèmes lors du processus de récupération.Exécuter des opérations synchrones dans la boucle de suivi de progression.Calculer le pourcentage de données téléchargées et mettre à jour la barre de progression en conséquence.

JavaScript Fetch : progression du téléchargement ​

Suivi de la progression du téléchargement ​

Utilisation des ReadableStreams ​

Affichage de la progression à l'utilisateur ​

Conseils professionnels ​

Conclusion ​