JavaScript Academy · Leçon

Réponses fetch en flux

Traitez les réponses volumineuses au fur et à mesure de leur arrivée.

Réponses fetch en flux est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Les réponses sont des flux

Une Response de fetch expose son corps sous la forme d’un ReadableStream via response.body. Au lieu d’attendre la charge utile complète, vous pouvez traiter les octets au fur et à mesure de leur arrivée.

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

Lire le flux du corps

response.body fournit des blocs de type Uint8Array. Obtenez un reader et parcourez-les comme n’importe quel flux lisible.

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

Suivre la progression du téléchargement

Combinez l’en-tête Content-Length avec le nombre d’octets reçus pour afficher une barre de progression.

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

Décoder les octets en texte

Utilisez TextDecoder pour transformer les blocs d’octets en chaînes. Transmettez { stream: true } afin que les caractères codés sur plusieurs octets et répartis entre plusieurs blocs soient correctement décodés.

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

Utiliser TextDecoderStream

Encore plus simple : faites passer le flux d’octets dans un TextDecoderStream pour obtenir directement un flux de chaînes.

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

Analyser NDJSON

Le JSON délimité par des retours à la ligne fournit un objet par ligne. Mettez le texte en mémoire tampon et émettez les lignes complètes au fur et à mesure de leur formation.

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

Diffuser les jetons d’un LLM

Ce modèle alimente les conversations avec une IA en flux : chaque bloc est un jeton ou un événement, affiché dès son arrivée pour produire un effet de saisie en direct.

Interrompre un flux de fetch

Transmettez un AbortSignal à fetch et appelez controller.abort() pour arrêter proprement un flux long.

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

Gérer les erreurs de flux

Les défaillances réseau survenant au milieu d’un flux rejettent la promesse de read(). Placez la boucle dans un bloc try/catch pour gérer les interruptions.

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

Quand ne pas utiliser les flux

Pour les réponses de petite taille, res.json() ou res.text() est plus simple. Utilisez les flux lorsque les charges utiles sont volumineuses, progressives ou de taille illimitée.

Le corps de la réponse ne s’utilise qu’une fois

Vous ne pouvez lire response.body qu’une seule fois. Appelez res.clone() avant la lecture si vous devez l’utiliser deux fois, par exemple pour la mise en cache.

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

Vérification rapide

Testez la récupération en flux.

Récapitulatif : récupération en flux

Vous avez lu response.body bloc par bloc, suivi la progression, décodé les octets avec TextDecoder/TextDecoderStream, analysé NDJSON, interrompu le flux avec AbortController et géré les erreurs. Ensuite : les flux de transformation.

Questions Fréquemment Posées

La leçon « Réponses fetch en flux » est-elle gratuite ?

Oui — le texte complet de « Réponses fetch en flux » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Réponses fetch en flux » ?

Traitez les réponses volumineuses au fur et à mesure de leur arrivée. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Réponses fetch en flux » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy