Why does JavaScript's fetch make me wait TWICE?

Summary

Dans cette vidéo, l'explorateur de JavaScript explique l'importance des deux 'await' lors de l'utilisation de la méthode fetch. Il clarifie que fetch renvoie une promesse qui se résout dès que les en-têtes du serveur sont reçus, mais que l'obtention du corps de la réponse peut prendre beaucoup plus de temps. Pour illustrer, il crée un serveur Node.js qui envoie des données un octet à la fois, montrant comment la promesse de fetch se résout rapidement, tandis que la lecture du corps peut être longue. Il explore également la lecture du corps de la réponse en temps réel à l'aide de la méthode 'readableStream'.

Takeaways

• 😀 Le fetch en JavaScript nécessite deux `await` pour obtenir une réponse complète : un pour la réponse elle-même et un pour le corps de la réponse.
• 🔍 `response.json()` renvoie une promise, contrairement à `JSON.parse()` qui est synchrone.
• 📖 Lors de l'utilisation de `fetch`, la promesse se résout dès que les en-têtes sont reçus, non pas lorsque le corps est entièrement transmis.
• 💡 Les en-têtes HTTP sont généralement peu nombreux, tandis que le corps du message peut être beaucoup plus long.
• 🛠️ Un exemple donné dans le script montre comment envoyer des données un octet à la fois, ce qui peut entraîner un temps d'attente important pour la réception du corps de la réponse.
• 📱 L'application web illustre comment les en-têtes sont reçus rapidement, mais le corps JSON peut prendre du temps à être entièrement reçu.
• 👀 En observant le réseau, on peut voir comment les données sont transmises progressivement et comment le navigateur les reçoit.
• 🌐 Le script mentionne également la possibilité d'utiliser `response.body.getReader()` pour lire le corps de la réponse progressivement.
• 🎯 L'exemple de code dans le script montre comment décoder et afficher progressivement les données reçues dans le DOM.
• 💼 Le script conclut en mentionnant la possibilité de soutenir le travail de l'auteur en distrayant les obstacles qui pourraient survenir.

Q & A

Pourquoi dois-je utiliser deux 'await' avec fetch en JavaScript?

Vous devez utiliser deux 'await' avec fetch en JavaScript car le premier 'await' attend la réponse du serveur, qui se résout dès que les en-têtes sont reçus. Le deuxième 'await' est nécessaire pour attendre que le corps de la réponse soit entièrement reçu, ce qui peut prendre du temps selon la taille du corps de la réponse.

Pourquoi la méthode .json() de la réponse retourne-t-elle une promesse?

La méthode .json() retourne une promesse car elle doit convertir le corps de la réponse en texte brut en objet JavaScript. Ce processus peut prendre du temps, surtout si le corps de la réponse est volumineux.

Quelle est la différence entre les en-têtes et le corps d'un message HTTP?

Les en-têtes d'un message HTTP contiennent des métadonnées telles que les types de contenu, les codes d'état, les en-têtes de cookie, etc., tandis que le corps contient les données effectives de la réponse, comme le texte, les images ou les données JSON.

Comment le serveur peut-il affecter le temps de réception du corps de la réponse?

Le serveur peut affecter le temps de réception du corps de la réponse en contrôlant la vitesse à laquelle il envoie les données. Par exemple, en envoyant les données un octet à la fois avec des délais, il peut simuler un flux de données lent.

Quel est l'intérêt de recevoir le corps de la réponse progressivement au lieu d'attendre sa totalité?

Recevoir le corps de la réponse progressivement permet de traiter les données en temps réel, ce qui est utile pour les applications qui nécessitent une réaction immédiate aux données reçues, comme le streaming de médias ou la mise à jour de l'interface utilisateur en direct.

Comment puis-je lire le corps de la réponse progressivement dans le navigateur?

Dans le navigateur, vous pouvez utiliser la méthode 'ReadableStream' de la propriété 'body' de la réponse pour lire progressivement les données. Vous pouvez ensuite utiliser un 'TextDecoder' pour décoder les données en texte et les traiter.

Quels sont les impacts de la taille des en-têtes HTTP sur la performance du réseau?

Une taille excessive des en-têtes HTTP peut entraîner une surcharge du trafic réseau et ralentir la vitesse de transfert des données, surtout si de nombreux en-têtes sont envoyés avec chaque requête.

Pourquoi la fonction json.parse() est-elle synchrone alors que la méthode .json() est asynchrone?

La fonction json.parse() est synchrone car elle traite des données en mémoire, ce qui est rapide. En revanche, la méthode .json() doit attendre que le corps de la réponse soit entièrement reçu et traité, ce qui est un processus asynchrone.

Comment le script Node.js dans l'exemple affecte-t-il la réception des données par le client?

Le script Node.js lit un fichier et l'envoie un octet à la fois, ce qui simule un flux de données lent. Cela permet de démontrer comment le client attend la totalité du corps de la réponse avant de pouvoir l'utiliser.

Quelle est la différence entre une promesse résolue et une promesse rejetée en JavaScript?

Une promesse résolue signifie que la tâche associée à la promesse a été réussie, tandis qu'une promesse rejetée signifie qu'une erreur s'est produite lors de la tâche. Les promesses sont un mécanisme pour gérer les opérations asynchrones.