Flux lisibles
Consommez les données morceau par morceau.
Flux lisibles est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Que sont les flux ?
L’API des flux traite les données progressivement, à mesure que les blocs arrivent, au lieu de tout charger en mémoire. Cela permet de gérer efficacement les téléchargements volumineux, les vidéos et les flux en direct.
Le ReadableStream
Un ReadableStream est une source que vous lisez bloc par bloc. Les navigateurs en exposent dans les réponses de fetch, les objets blob de fichiers et bien d’autres éléments.
Créer un flux
Construisez-en un avec un objet source sous-jacent dont start(controller) met les blocs en file d’attente et signale la fin.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});Obtenir un reader
getReader() verrouille le flux et renvoie un reader. Tant qu’il est verrouillé, aucun autre consommateur ne peut le lire.
const reader = stream.getReader();Lire les blocs
reader.read() renvoie une promesse qui se résout en { value, done }. done devient true lorsque le flux est épuisé.
const { value, done } = await reader.read();
console.log(value, done);La boucle de lecture
Appelez read() en boucle jusqu’à ce que done soit vrai afin de consommer tout le flux.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}Libérer le verrou
Appelez reader.releaseLock() pour déverrouiller le flux afin qu’un autre reader puisse prendre le relais.
reader.releaseLock();La méthode de récupération
Une source sous-jacente peut définir pull(controller), appelée lorsque le consommateur demande davantage de données — ce qui permet une génération différée à la demande.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});Itération asynchrone
Dans les environnements modernes, un ReadableStream peut être parcouru de manière asynchrone, ce qui vous permet d’utiliser for await...of au lieu d’une boucle manuelle.
for await (const chunk of stream) {
console.log(chunk);
}Annuler un flux
reader.cancel(reason) arrête le flux avant sa fin et libère les ressources — ce qui est important pour interrompre les téléchargements volumineux.
await reader.cancel("user navigated away");tee : diviser un flux
tee() renvoie deux flux qui reçoivent chacun une copie de chaque bloc — pratique pour lire les données deux fois, par exemple afin de les mettre en cache et de les afficher.
const [a, b] = stream.tee();
// read a and b independentlyVérification rapide
Testez les flux lisibles.
Récapitulatif : flux lisibles
Vous avez créé un ReadableStream, obtenu un reader, consommé les blocs avec read() dans une boucle, libéré le verrou, utilisé pull pour produire les données à la demande, parcouru le flux avec for await et séparé le flux avec tee(). Ensuite : les réponses de fetch en flux.
Questions Fréquemment Posées
La leçon « Flux lisibles » est-elle gratuite ?
Oui — le texte complet de « Flux lisibles » 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 « Flux lisibles » ?
Consommez les données morceau par morceau. 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 1 sur 4.
Combien de temps prend la leçon « Flux lisibles » ?
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.