JavaScript Academy · Leçon

Contre-pression et acheminement

Gérez le contrôle du flux avec pipeTo et pipeThrough.

Contre-pression et acheminement est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Le problème de rétropression

Si un producteur génère des données plus vite qu’un consommateur ne peut les traiter, la mémoire se remplit. La rétropression est le mécanisme par lequel un consommateur lent demande à un producteur rapide de ralentir.

WritableStream

Un WritableStream est une destination dans laquelle vous écrivez des blocs. Sa méthode sink write(chunk) peut être asynchrone et signaler qu’elle est prête pour le bloc suivant.

const sink = new WritableStream({
  write(chunk) {
    console.log("writing", chunk);
  }
});

Obtenir un writer

getWriter() verrouille le flux inscriptible et renvoie un writer avec write(), close() et une promesse ready.

const writer = sink.getWriter();
await writer.write("hello");
await writer.close();

Le signal de disponibilité

Attendez writer.ready avant d’écrire. Cette promesse est résolue lorsque le flux peut accepter davantage de données : c’est la rétropression en action.

await writer.ready;
await writer.write(chunk);

pipeTo

readable.pipeTo(writable) relie une source à une destination et gère automatiquement la rétropression pour vous. Cette méthode renvoie une promesse qui est résolue lorsque l’acheminement est terminé.

await readableStream.pipeTo(writableStream);
console.log("done piping");

pipeThrough

pipeThrough(transform) insère une transformation entre la source et le sink, puis renvoie le flux lisible transformé. Chaînez-en plusieurs pour construire un pipeline.

sourceStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(parser)
  .pipeTo(consumer);

Seuils de remplissage

Le highWaterMark d’une stratégie de mise en file définit le nombre de blocs pouvant être placés en file avant que la rétropression ne s’active. Ajustez-le pour équilibrer le débit et l’utilisation de la mémoire.

new ReadableStream(source, new CountQueuingStrategy({ highWaterMark: 4 }));

desiredSize

La propriété desiredSize d’un contrôleur indique au producteur l’espace restant dans la file. Lorsqu’elle atteint zéro ou une valeur négative, arrêtez de mettre des données en file.

pull(controller) {
  while (controller.desiredSize > 0) {
    controller.enqueue(nextChunk());
  }
}

Interrompre un acheminement

Passez { signal } à pipeTo pour interrompre tout le pipeline avec un AbortController.

const ctrl = new AbortController();
readable.pipeTo(writable, { signal: ctrl.signal });
ctrl.abort();

Options d’acheminement

pipeTo accepte preventClose, preventAbort et preventCancel pour contrôler la propagation des erreurs et de la fin entre les deux extrémités.

readable.pipeTo(writable, { preventClose: true });

Un pipeline complet

Mettons tout ensemble : récupérer des octets, les décoder, les transformer, puis les écrire dans un sink, le tout avec un contrôle automatique du flux.

const res = await fetch("/data");
await res.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(lineSplitter)
  .pipeTo(uiSink);

Vérification rapide

Testez la rétropression.

Récapitulatif : rétropression et acheminement

Vous avez découvert WritableStream et les writer, attendu ready pour gérer la rétropression, connecté des flux avec pipeTo et pipeThrough, ajusté highWaterMark et observé desiredSize, puis interrompu des pipelines. Cela termine l’API Streams.

Questions Fréquemment Posées

La leçon « Contre-pression et acheminement » est-elle gratuite ?

Oui — le texte complet de « Contre-pression et acheminement » 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 « Contre-pression et acheminement » ?

Gérez le contrôle du flux avec pipeTo et pipeThrough. 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 4 sur 4.

Combien de temps prend la leçon « Contre-pression et acheminement » ?

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